/*头像*/
.commonicon {
	display: inline-block;
	width: 28px;
	height: 28px;
	background: url(/static/images/avatar/avatar.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	transform: scale(2);
}

.commonicon-2 {
	background-position: -28px 0
}

.commonicon-3 {
	background-position: -56px 0
}

.commonicon-4 {
	background-position: -84px 0
}

.commonicon-5 {
	background-position: -112px 0
}

.commonicon-6 {
	background-position: -140px 0
}

.commonicon-7 {
	background-position: -168px 0
}

.commonicon-8 {
	background-position: -196px 0
}

.commonicon-9 {
	background-position: -224px 0
}

.commonicon-10 {
	background-position: -252px 0
}

/*定制*/
.customicon {
	position: relative;
	display: inline-block;
	width: 56px;
	height: 56px;
	background: url(/static/images/avatar/customicon_avatar.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.customicon:after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.customicon-2 {
	background-position: -56px 0
}

.customicon-3 {
	background-position: -112px 0
}

.customicon-4 {
	background-position: -168px 0
}

.customicon-4:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_4.png);
	animation: dynamic_avatar_customicon_4 1.5s steps(7) infinite;
}

@keyframes dynamic_avatar_customicon_4 {
	100% {
		background-position: -392px 0;
	}
}

.customicon-5 {
	background-position: -224px 0
}

.customicon-5:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_5.png);
	animation: dynamic_avatar_customicon_5 1.5s steps(10) infinite;
}

@keyframes dynamic_avatar_customicon_5 {
	100% {
		background-position: -560px 0;
	}
}

.customicon-6 {
	background-position: -280px 0
}

.customicon-6:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_6.png);
	animation: dynamic_avatar_customicon_6 1.5s steps(8) infinite;
}

@keyframes dynamic_avatar_customicon_6 {
	100% {
		background-position: -448px 0;
	}
}

.customicon-7 {
	background-position: -336px 0;
}

.customicon-8 {
	background-position: -392px 0
}

.customicon-8:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_8.png);
	animation: dynamic_avatar_customicon_8 .5s steps(10) infinite;
}

@keyframes dynamic_avatar_customicon_8 {
	100% {
		background-position: -560px 0;
	}
}

.customicon-9 {
	background-position: -448px 0
}

.customicon-9:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_9.png);
	animation: dynamic_avatar_customicon_9 .5s steps(10) infinite;
}

@keyframes dynamic_avatar_customicon_9 {
	100% {
		background-position: -560px 0;
	}
}

.customicon-10 {
	background-position: -504px 0
}

.customicon-11 {
	background-position: 0 -56px
}

.customicon-11:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_11.png);
	animation: dynamic_avatar_customicon_11 1s steps(6) infinite;
}

@keyframes dynamic_avatar_customicon_11 {
	100% {
		background-position: -336px 0;
	}
}

.customicon-12 {
	background-position: -56px -56px
}

.customicon-13 {
	background-position: -112px -56px
}

.customicon-14 {
	background-position: -168px -56px
}

.customicon-15 {
	background-position: -224px -56px
}

.customicon-15:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_15.png);
	animation: dynamic_avatar_customicon_15 3s steps(1) infinite;
}

@keyframes dynamic_avatar_customicon_15 {
	0% {
		background-position-x: 0;
	}
	4% {
		background-position-x: -56px;
	}
	8% {
		background-position-x: -112px;
	}
	12% {
		background-position-x: -56px;
	}
	16% {
		background-position-x: 0;
	}
	20% {
		background-position-x: -56px;
	}
	24% {
		background-position-x: -112px;
	}
	28% {
		background-position-x: -56px;
	}
	32% {
		background-position-x: 0 0;
	}
	48% {
		background-position-x: -168px;
	}
	54% {
		background-position-x: -224px;
	}
	60% {
		background-position-x: -280px;
	}
	84% {
		background-position-x: -224px;
	}
	90% {
		background-position-x: -168px;
	}
	96% {
		background-position-x: 0;
	}
}

.customicon-16:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_16.png);
	animation: dynamic_avatar_customicon_16 4s steps(1) infinite;
}
@keyframes dynamic_avatar_customicon_16 {
	0%{background-position-x:0}
	5%{background-position-x:-56px}
	10%{background-position-x:-112px}
	15%{background-position-x:-168px}
	20%{background-position-x:-224px}
	25%{background-position-x:-280px}
	30%{background-position-x:-224px}
	35%{background-position-x:-280px}
	40%{background-position-x:-336px}
	45%{background-position-x:-392px}
	50%{background-position-x:-336px}
	55%{background-position-x:-280px}
	60%{background-position-x:-224px}
	65%{background-position-x:-168px}
	70%{background-position-x:-112px}
	75%{background-position-x:-56px}
	80%{background-position-x:0}
	85%{background-position-x:-448px}
	90%{background-position-x:0 0}
	95%{background-position-x:-448px}
}

.customicon-17:after {
	background: url(/static/images/avatar/dynamic_avatar_customicon_17.png);
	animation: dynamic_avatar_customicon_17 .5s steps(3) infinite;
}

@keyframes dynamic_avatar_customicon_17 {
	100% {
		background-position: -168px 0;
	}
}
.customicon-18 {
	background-position: -392px -56px
}

/*限定*/
.limiticon {
	display: inline-block;
	width: 56px;
	height: 56px;
	background: url(/static/images/avatar/limit_avatar.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

.limiticon-2 {
	background-position: -56px 0
}

.limiticon-3 {
	background-position: -112px 0
}

.limiticon-4 {
	background-position: -168px 0
}

.limiticon-5 {
	background-position: -224px 0
}

.limiticon-6 {
	background-position: -280px 0
}

.limiticon-7 {
	background-position: -336px 0
}

/*敌人*/
.monstericon {
	display: inline-block;
	background-image: url(/static/images/monster_icon.png);
	background-repeat: no-repeat;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
	width: 56px;
	height: 56px;
}
.monstericon.monstericon-1 {
	background-position: -56px 0;
}

.monstericon.monstericon-2 {
	background-position: -112px 0;
}

.monstericon.monstericon-3 {
	background-position: -168px 0;
}

.monstericon.monstericon-4 {
	background-position: -224px 0;
}

.monstericon.monstericon-5 {
	background-position: -280px 0;
}
.monstericon.monstericon-11 {
	background-position: -336px -0px
}

.monstericon.monstericon-12 {
	background-position: -392px -0px
}

.monstericon.monstericon-13 {
	background-position: -448px -0px
}

.monstericon.monstericon-14 {
	background-position: -504px -0px
}

.monstericon.monstericon-15 {
	background-position: -0px -56px
}

.monstericon.monstericon-21 {
	background-position: -56px -56px
}

.monstericon.monstericon-22 {
	background-position: -112px -56px
}

.monstericon.monstericon-23 {
	background-position: -168px -56px
}

.monstericon.monstericon-24 {
	background-position: -224px -56px
}

.monstericon.monstericon-25 {
	background-position: -280px -56px
}

.monstericon.monstericon-31 {
	background-position: -336px -56px
}

.monstericon.monstericon-32 {
	background-position: -392px -56px
}

.monstericon.monstericon-33 {
	background-position: -448px -56px
}

.monstericon.monstericon-34 {
	background-position: -504px -56px
}

.monstericon.monstericon-35 {
	background-position: -0px -112px
}

/*颜色*/
.character-name {
	font-weight: 700;
	background: #fff;
	background-clip: text !important;
	-webkit-background-clip: text !important;
	color: transparent;
	display: inline;
	font-family: Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	user-select: text;
	text-shadow: none;
}

.mall-color .character-name {
	background-clip: unset !important;
}

.character-name-1 {
	background: #baa2db;
}

.character-name-2 {
	background: #8ec6f0;
}

.character-name-3 {
	background: #82dcca;
}

.character-name-4 {
	background: #fcc778;
}

.character-name-5 {
	background: #e18a6e;
}

.character-name-6 {
	background: #ecadb1;
}

.character-name-7 {
	background: linear-gradient(90deg, #ac8fd4, #ac8fd4 3%, #e3daf1 15%, #e3daf1 30%, #c7b5e3 50%, #ac8fd4 95%, #ac8fd4);
}

.character-name-8 {
	background: linear-gradient(90deg, #77baec, #77baec 3%, #d2e8f9 15%, #d2e8f9 30%, #a5d1f3 50%, #77baec 95%, #77baec);
}

.character-name-9 {
	background: linear-gradient(90deg, #82dcca, #82dcca 3%, #d5f3ed 15%, #d5f3ed 30%, #ace7dc 50%, #82dcca 95%, #82dcca);
}

.character-name-10 {
	background: linear-gradient(90deg, #fcc778, #fcc778 3%, #feecd2 15%, #feecd2 30%, #fddaa5 50%, #fcc778 95%, #fcc778);
}

.character-name-11 {
	background: linear-gradient(90deg, #dd7b5c, #dd7b5c 3%, #ebb4a2 15%, #ebb4a2 30%, #e49880 50%, #dd7b5c 95%, #dd7b5c);
}

.character-name-12 {
	background: linear-gradient(90deg, #e3858b, #e3858b 3%, #f6d6d8 15%, #f6d6d8 30%, #ecadb1 50%, #e3858b 95%, #e3858b);
}

.character-name-13 {
	background: linear-gradient(90deg, #b8b8b8, #b8b8b8 3%, #e7e7e7 15%, #fff 30%, #d0d0d0 50%, #b8b8b8 95%, #b8b8b8);
}

.character-name-14 {
	background: linear-gradient(90deg, #e1921b, #faa21e 10%, #fcc778 15%, #fff 30%, #fcc778 45%, #faa21e 90%, #e1921b);
	text-shadow: 0 0 5px rgba(250, 162, 30, .5);
}

.character-name-15 {
	background: linear-gradient(90deg, #ff7676, #ffb76b, #fdfd96, #72e0a4, #6ea8ff, #b48df9, #ff76c8);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-16 {
	background: linear-gradient(90deg, #ff914d, #d64d4d, #b3245a);
}
.character-name-17 {
	background: linear-gradient(90deg, #63c0ee, #41a3d4, #3471da);
}
.character-name-18 { 
	background: linear-gradient(90deg, #66e29e, #3db175, #207a52);
}
.character-name-19 {
	background: linear-gradient(90deg, #c678dd, #9f58c6, #7a3fa0);
}
.character-name-20 {
	background: linear-gradient(90deg, #e9c46a, #f4a261, #8d5524);
}
.character-name-21 {
	background: linear-gradient(90deg, #5ce1e6, #3ca5b3, #24738a);
}
.character-name-22 {
	background: linear-gradient(90deg, #ff92c2, #d95a8c, #a83b6a);
}
.character-name-23 {
	background: linear-gradient(90deg, #a38cff, #8f65fa, #7849dd);
}
.character-name-24 {
	background: linear-gradient(90deg, #d3ee90, #9ac060, #3c803c);
}
.character-name-25 {
	background: linear-gradient(90deg, #ff6b6b, #d8345f, #9b1d38);
}
.character-name-26 {
	background: linear-gradient(147deg, #6ea8ff, #72e0a4, #af8cf1, #ffb76b, #ff7676);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-27 {
	background: linear-gradient(230deg, #ff5e5e, #ff9a3c, #fd5a87, #3f88f5, #72e0a4 90%);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-28 {
	background: linear-gradient(146deg, #9de2f9, #62b4d4, #a158cd, #d59e6c 90%);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-29 {
	background: linear-gradient(135deg, #09a3a5 30%, #ff9657, #cd5717);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-30 {
	background: linear-gradient(130deg, #ffcc80, #c57600, #ad2aff);
	text-shadow: 0 0 5px rgba(255, 255, 255, .25);
}
.character-name-31 {
	background: #8ea5c2;
}
.character-name-32 {
	background: #dda0dd;
}
.character-name-33 {
	background: #e9967a;
}
.character-name-34 {
	background: #f78f9f;
}
.character-name-35 {
	background: #db5625;
}
.character-name-36 {
	background: #f0e68c;
}
.character-name-37 {
	background: #3ab93a;
}
.character-name-38 {
	background: #62c9cf;
}
.character-name-39 {
	background: #398af1;
}
.character-name-40 {
	background: #daa520;
}
/*气泡*/
.chat-bubble.bubble-system {
	border-radius: 6px;
	background: rgba(0, 0, 0, .3);
	padding: 4px;
}

.chat-bubble.bubble-0 {
	padding: 6px;
	margin-left: 6px;
	border-radius: 0 6px 6px 6px;
	background: #fff;
	border-image-outset: 0;
	border-image-repeat: stretch;
	color: #333;
}

.chat-bubble.bubble-0:after {
	content: '';
	position: absolute;
	left: -8px;
	top: 0;
	background: transparent;
	border: 4px solid transparent;
	border-right-color: #fff;
	border-top-color: #fff;
}

.my .chat-bubble.bubble-0 {
	margin-left: 0;
	margin-right: 6px;
	border-radius: 6px 0 6px 6px;
}

.my .chat-bubble.bubble-0:after {
	left: auto;
	right: -8px;
	border-left-color: #fff;
	border-right-color: transparent;
}

.chat-bubble.bubble-1 {
	padding: 6px 10px;
	border-image-source: url(/static/images/bubble/1.png);
	border-image-slice: 14 18 14 20 fill;
	border-image-width: 14px 18px 14px 20px;
	color: #83E0CF;
}

.chat-bubble.bubble-2 {
	padding: 24px;
	border-image-source: url(/static/images/bubble/2.png);
	border-image-slice: 32 42 36 40 fill;
	border-image-width: 32px 42px 36px 40px;
	color: #000;
}

.chat-bubble.bubble-3 {
	margin-top: -6px;
	padding: 20px 18px;
	border-image-source: url(/static/images/bubble/3.png);
	border-image-slice: 34 52 30 27 fill;
	border-image-width: 34px 52px 30px 27px;
	color: #024581;
}

.my .chat-bubble.bubble-3 {
	border-image-source: url(/static/images/bubble/3_1.png);
	border-image-slice: 34 27 30 52 fill;
	border-image-width: 34px 27px 30px 52px;
}

.chat-bubble.bubble-4 {
	padding: 16px 12px 16px 16px;
	border-image-source: url(/static/images/bubble/4.png);
	border-image-slice: 36 44 27 35 fill;
	border-image-width: 36px 44px 27px 35px;
	color: #333;
}

.chat-bubble.bubble-5 {
	margin-top: -12px;
	padding: 22px 24px 6px 20px;
	border-image-source: url(/static/images/bubble/5.png);
	border-image-slice: 33 42 16 37 fill;
	border-image-width: 33px 42px 16px 37px;
	color: #270D04;
}

.my .chat-bubble.bubble-5 {
	padding: 22px 20px 6px 24px;
	border-image-source: url(/static/images/bubble/5_1.png);
	border-image-slice: 33 37 16 42 fill;
	border-image-width: 33px 37px 16px 42px;
}

.chat-bubble.bubble-6 {
	padding: 10px 14px 16px 14px;
	border-image-source: url(/static/images/bubble/6.png);
	border-image-slice: 18 26 28 32 fill;
	border-image-width: 18px 26px 28px 32px;
	color: #8DFDFD;
}

.chat-bubble.bubble-7 {
	margin-top: -12px;
	padding: 38px 26px 16px 20px;
	border-image-source: url(/static/images/bubble/7.png);
	border-image-slice: 52 45 23 33 fill;
	border-image-width: 52px 45px 23px 33px;
	color: #000;
}
.chat-name-bubble-7{
	padding: 0 45px 0 0;
}

.my .chat-bubble.bubble-7 {
	padding: 38px 20px 16px 26px;
	border-image-source: url(/static/images/bubble/7_1.png);
	border-image-slice: 52 33 23 45 fill;
	border-image-width: 52px 33px 23px 45px;
}
.my .chat-name-bubble-7{
	padding: 0 0 0 45px;
}

.chat-bubble.bubble-8 {
	min-width: 50px;
	margin-top: -20px;
	padding: 30px 34px 10px 12px;
	border-image-source: url(/static/images/bubble/8.png);
	border-image-slice: 42 51 20 28 fill;
	border-image-width: 42px 51px 20px 28px;
	color: #000;
}
.chat-name-bubble-8{
	padding: 0 51px 0 0;
}

.my .chat-bubble.bubble-8 {
	padding: 30px 12px 10px 34px;
	border-image-source: url(/static/images/bubble/8_1.png);
	border-image-slice: 42 28 20 51 fill;
	border-image-width: 42px 28px 20px 51px;
}
.my .chat-name-bubble-8{
	padding: 0 0 0 51px;
}

.chat-bubble.bubble-9 {
	min-width: 50px;
	margin-top: -2px;
	padding: 12px 12px 12px 18px;
	border-image-source: url(/static/images/bubble/9.png);
	border-image-slice: 14 14 18 20 fill;
	border-image-width: 14px 14px 18px 20px;
	color: #000;
}

.my .chat-bubble.bubble-9 {
	padding: 12px 18px 12px 12px;
	border-image-source: url(/static/images/bubble/9_1.png);
	border-image-slice: 14 20 18 14 fill;
	border-image-width: 14px 20px 18px 14px;
}

.chat-bubble.bubble-10 {
	padding: 24px;
	border-image-source: url(/static/images/bubble/10.png);
	border-image-slice: 32 42 36 40 fill;
	border-image-width: 32px 42px 36px 40px;
	color: #6D465A;
}

.chat-bubble.bubble-11 {
	padding: 20px;
	border-image-source: url(/static/images/bubble/11.png);
	border-image-slice: 28 38 22 36 fill;
	border-image-width: 28px 38px 22px 36px;
	color: #000;
}

.chat-bubble.bubble-12 {
	min-width: 50px;
	margin-top: -8px;
	padding: 20px 30px 8px 18px;
	border-image-source: url(/static/images/bubble/12.png);
	border-image-slice: 32 30 14 22 fill;
	border-image-width: 32px 30px 14px 22px;
	color: #000;
}

.my .chat-bubble.bubble-12 {
	padding: 20px 18px 8px 30px;
	border-image-slice: 32 22 14 30 fill;
	border-image-width: 32px 22px 14px 30px;
	border-image-source: url(/static/images/bubble/12_1.png);
}
/*舰队*/
.squadron-pattern-0{
	
}
.squadron-icon-1::after,.squadron-pattern-1:before{
	mask-position: 0 0;
}
.squadron-icon-2:after,.squadron-pattern-2:before{
	mask-position: -28px 0;
}
.squadron-icon-3:after,.squadron-pattern-3:before{
	mask-position: -56px 0
}
.squadron-icon-4:after,.squadron-pattern-4:before{
	mask-position: -84px 0
}
.squadron-icon-5:after,.squadron-pattern-5:before{
	mask-position: -112px 0
}
.squadron-icon-6:after,.squadron-pattern-6:before{
	mask-position: -140px 0
}
.squadron-icon-7:after,.squadron-pattern-7:before{
	mask-position: -168px 0
}
.squadron-icon-8:after,.squadron-pattern-8:before{
	mask-position: -196px 0
}
.squadron-icon-9:after,.squadron-pattern-9:before{
	mask-position: -224px 0
}
.squadron-icon-10:after,.squadron-pattern-10:before{
	mask-position: -252px 0
}