PADDashFormation/style.css

@charset "utf-8";
@font-face {
	font-family: 'FOT-KurokaneStd-EB';
	src:
		local("FOT-Kurokane Std EB"),
		local("KurokaneStd-EB"),
		local("FOT-くろかね Std"),
		url("./fonts/FOT-KurokaneStd-EB.woff2") format('woff2');
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: 'zpix';
	src:
		local("Zpix"),
		url("./fonts/zpix.woff2") format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Font Awesome 5 Free';
	src:
		local("FontAwesome"),
		url("fonts/fa-solid-900.woff2") format("woff2");
	font-style: normal;
	font-weight: 900;
	font-display: block;
}
@keyframes rotate-animate{
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
@keyframes gravity-animate{
	from {
		transform: scaley(1);
	}
	to {
		transform: scaley(0.5);
	}
}
body{
	--head-block-width: 108px;
	--head-block-height: 108px;
	--search-icon-unchecked: 0.4;
	--team-1-bgcolor : pink;
	--team-2-bgcolor : lightblue;
	--team-3-bgcolor : lightgreen;
	--team-1-color : red;
	--team-2-color : blue;
	--team-3-color : green;
	--font-family : "Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
	--icon-font-family : 'Font Awesome 5 Free', "Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
	--game-font-family : 'FOT-KurokaneStd-EB',"Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
	--border-width: 2px;

	font-family: var(--font-family);
}
.noscript {
	color: red;
	font-size: 2em;
}
.display-none{
	display:none !important;
}
.disabled{
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
}
.help-link::before{
	content: "ℹ️Help & Tips";
}

.title,
.title-display
{
	font-size: 2em;
	font-weight: bold;
}
.detail,
.detail-display
{
	min-height: 1.5em;
	font-size: 1.5em;
}
.title,
.detail,
.title-display,
.detail-display
{
	font-family: var(--font-family);
	width:100%;
	border: none;
	background: none;
	box-sizing: border-box;
	padding: 1px;
	margin: 0;
	white-space: break-spaces;
}

.guide-mod .control-box>div.status
{
	display: block;
}
.formation-box .title:focus,
.formation-box .detail:focus
{
	border: black solid 1px;;
	background-color: #eee;
	padding: 0;
}
.formation-box .title,
.formation-box .detail
{
	display: none;
}
.formation-box .edit .title,
.formation-box .edit .detail
{
	display: block;
}
.formation-box .edit .title-display,
.formation-box .edit .detail-display
{
	display: none;
}

.config-checkbox-ipt{
	display:none;
}
.config-checkbox-lbl .config-checkbox-lbl-cicle{
	width: 28px;
	height: 12px;
	display: inline-block;
	position: relative;
	background-color: #8884;
	border-radius: 16px;
	margin-right: 5px;
}
.config-checkbox-lbl .config-checkbox-lbl-cicle::before{
	content:"";
	width: 20px;
	height: 20px;
	position: absolute;
	transition: .3s ease-out;
	background-color: #c6c6c6;
	box-shadow: 0 2px 4px 0 #0003;
	border-radius: 50%;
	left: -4px;
	top: -4px;
}
.config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle {
	background: rgba(0,160,216,0.8);
}
.config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle::before {
	background: #00A0D8;
	box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
	left: calc(100% - 16px);
}
.config-checkbox-lbl{
	cursor: pointer;
	line-height: 25px;
	margin-right: 20px;
	display: inline-block;
}
.config-checkbox-lbl[for$=and-or]::after{
	content: "OR";
}
input:checked+ .config-checkbox-lbl[for$=and-or]::after{
	content: "AND";
}

.status{
	line-height: 16px;
}
/*.status.loading-mon-info .text::before{
	content: "正在加载怪物数据";
}*/
.status.loading-check-version .icon,
.status.loading-mon-info .icon,
.status.loading-skill-info .icon,
.status.prepare-capture .icon
{
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 4px SteelBlue dotted;
	border-radius: 50%;
	animation: rotate-animate 5s infinite linear;
	vertical-align: middle;
}
ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
/*队伍的整个盒子*/
.formation-box{
	width: 648px;
	min-width: 648px;
}

/*弹出窗口相关*/
.dialog
{
	color: white;
	position: absolute;
	padding: 5px;
	border: 2px ridge #D1D398;
	top: 0;
	background-image: linear-gradient(to bottom,#788321f0,#3E4D14f0);
	border-radius: 6px;
	box-shadow: black 2px 0px 1px,black 0px 2px 1px,black -2px 0px 1px,black 0px -2px 1px;
	margin-left: calc(50% - 200px);
	margin-top: 30px;
	font-family: var(--game-font-family);
	text-shadow: black 2px 2px 0;
}
.dialog .dialog-title
{
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	margin-bottom: 5px;
}
.dialog .dialog-content .additional-string
{
	border-top: 2px solid white;
	margin-top: 5px;
}
/*.dialog .dialog-content .additional-string::before
{
	content: "其他語言";
}*/
.dialog .dialog-control
{
	text-align: center;
	margin-top:10px;
}
.brown-button
{
	background-image: linear-gradient(to bottom,#C38E5F,#2F2008);
	border: none;
	border-radius: 5px;
	padding: 2px;
	cursor: pointer;
	transition: transform 0.1s;
}
.brown-button:active
{
	transform: scale(1.1);
}
.brown-button::before
{
	display: inline-block;
	box-sizing: border-box;
	min-width: 100px;
	padding: 5px;
	background-color: #956A42;
	background-image: url(images/slate.svg);
	background-size: 120px 120px;
	border-radius: 2px;
	font-size: 20px;
	line-height: 20px;
	vertical-align: middle;
	color: white;
	font-family: var(--game-font-family);
	text-shadow: black 2px 2px 0;
}
/*
.dialog-search-string .dialog-title::before
{
	content: "以字符串搜索";
}
.dialog-close::before
{
	content: "关闭";
}
*/
.dialog-show-any-string {
	width: 400px;
	top: 100px;
	position: fixed;
}
.dialog-search-string
{
	width: 260px;
}
.dialog .string-copy,
.dialog .string-search
{
	box-sizing: border-box;
	width: 45px;
	margin-left: 5px;
	cursor: pointer;
	background-color: #994433;
	border: 2px solid #FFCC88;
	box-shadow: black 1px 0 1px,black -1px 0 1px,black 0 -1px 1px,black 0 3px 2px;
	border-radius: 5px;
	padding: 0;
}
.dialog .string-copy::before
{
	content: "📋";
}
.dialog .string-search::before
{
	content: "🔍";
}
.dialog .string-value
{
	box-sizing: border-box;
	width: calc(100% - 50px * 1);
}
.dialog .additional-string .string-value
{
	width: calc(100% - 50px * 2);
}

/*单个怪物*/
.monster{
	font-family: var(--game-font-family);
	width: 100px;
	height: 100px;
	margin: 0;
	display: block;
	background-repeat: no-repeat;
	position: relative;
	cursor: pointer;
	border-radius: 5px;
	text-decoration:none;
}
.monster.null,.monster.delay,
.null .property,.delay .property,
.null .subproperty,.delay .subproperty
{
	box-sizing: border-box;
	background-image: none !important;
}
.monster.null{
	background-color: rgba(230,230,230,0.5);
	border: 3px grey dashed;
}
.edit-box .monster.null{
	background-color: #653;
	border: none;
	box-shadow: inset black 0 0 7px;
}
.member{
	vertical-align: top;
}
.monster.delay{
	background-color: yellow;
	box-shadow: inset orange 0 0 7px;
	border: 3px black solid;
}
.monster.delay::before{
	width: 94px;
	height: 94px;
	color: black;
	font-size: 30px;
	line-height: 47px;
	text-align: center;
	font-weight: bold;
	/*content: "应 对\A威 吓";*/
	font-family: var(--font-family);
	white-space: pre-wrap;
	display: inline-block;
}
/*怪物属性*/
.property,.subproperty{
	position:absolute;
	left:0;top:0;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-image: url(images/CARDFRAME2.PNG);
	background-position: 100px 100px; /*默认都不显示*/
}
.subproperty.changed-sub-attr::before {
	content: "";
	right: 3px;
	bottom: 5px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 1px solid lightgreen;
	border-radius: 50%;
	box-shadow: 0 0 3px lightgreen,0 0 3px lightgreen,0 0 3px lightgreen;
	display: block;
	position: absolute;
}
.type-icon.append-type {
	background-color: lightgreen;
	box-shadow: 1px 1px 3px lightgreen,1px 1px  3px lightgreen,1px 1px  3px lightgreen;
}
/*怪物-加值*/
.monster .plus{
	color: yellow;
	font-size: 17px;
	line-height: 17px;
	text-shadow: black 0 0 1px,black 0 0 2px, black 2px 2px 0;
	position: absolute;
	left:10px;
}
.monster.null>div,
.monster.delay>div
{
	display:none !important;
}
.monster .plus .hp::before,
.monster .plus .atk::before,
.monster .plus .rcv::before,
.monster .plus.has297::before
{
	content: "+";
}
.monster .plus.has297::after{
	content: "297";
}
.monster .plus.has297 .hp,
.monster .plus.has297 .atk,
.monster .plus.has297 .rcv
{ /*当是297时隐藏3维*/
	display:none;
}
/*怪物-觉醒*/
.awoken-count-num
{
	color: yellow;
	text-shadow: black 0 0 4px;
	text-align: center;
	background-image: url(images/awoken-count-bg.png);
	background-repeat: no-repeat;
	width: 34px;
	height: 38px;
}
.monster .awoken-count-num{
	position: absolute;
	top: -4px;
	right: 0;
	transform: scale(0.75) translateX(4px);
}

/*显示怪物觉醒的数字*/
.awoken-count-num
{
	font-family: var(--game-font-family);
	font-size: 20px;
	line-height: 28px;
}
.awoken-count-num::before
{
	content: attr(data-value);
}
.awoken-count-num[data-value="0"]
{
	display: none;
}
.awoken-count-num.full-awoken
{
	display: inline-block;
}
.awoken-count-num.full-awoken::before
{
	content: "★";
}
.allowable-assist .awoken-count-num.full-awoken
{
	text-shadow: none;
	background-position-y: -38px;
}
.allowable-assist .awoken-count-num.full-awoken::before
{
	display: none;
}
/*武器*/
.monster.wepon .awoken-count-num.full-awoken{
	transform: scale(0.79) translateY(4px);
	width:32px;height:32px;
	background-image: url(images/awoken.png);
	background-position-x: 0;
	background-position-y: -1568px;
}
/*怪物-超觉醒*/
.monster .super-awoken{
	position: absolute;
	right:0;
	top: 25px;
	transform: scale(0.75) translateX(4px);
}
/*怪物-等级*/
.monster .level{
	font-size: 15px;
	line-height: 17px;
	color: white;
	height: 17px;
	text-shadow: black 0 0 2px, black 2px 2px 0;
	position: absolute;
	left: 5px;
	bottom: 0;
	vertical-align: top;
}
.monster .level::after
{
	content: attr(data-value);
}
.monster .level.max
{
	color: #FEFF85;
}
.monster .level.max::after
{
	display: none;
}
.monster .level[data-level-range="110"]{
	color: #85BCFF;
}
.monster .level[data-level-range="120"]{
	color: #19F897;
}
.monster .level[data-level-range="error"]{
	color: red;
}
/*.monster .level::before{
	content: "Lv.";
}.monster .level.max::before{
	content: "Lv.最大";
}*/
.monster .id{
	display: block;
	color: white;
	font-family: var(--font-family);
	font-size: 15px;
	font-weight: 500;
	line-height: 17px;
	height: 17px;
	text-shadow: black 0px 0px 2px,black -1px -1px 1px,black 1px 1px 1px;
	position: absolute;
	left: 5px;
	bottom: 15px;
}
body:not(.show-mon-id) .monster .id{
	display: none;
}
.monster .id::before{
	font-size: 12px;
}
/*.monster .id::before{
	content: "No.";
}*/
.monster .skill-cd::before{
	content:"CD";
	font-size: 10px;
}
.monster .skill-cd {
	font-size: 13px;
	line-height: 13px;
	color:white;
	text-shadow: black 0 0 1px,black 0 0 2px, black 2px 2px 0;
	position: absolute;
	right:0;
	bottom:0;
}
body:not(.show-mon-skill-cd) .monster .skill-cd.max-skill {
	display: none;
}
/*显示怪物星级*/
.show-mon-awoken .monster .rarity::before{
	position: absolute;
	left: 3px;
	top: 10px;
	font-size: 22px;
	content: attr(data-value)"★";
	color: yellow;
	-webkit-text-stroke: 1px black;
	text-shadow: black 1px 1px 1px;
}

/*交换队长技的图标*/
.monster .switch-leader
{
	position: absolute;
	right: 0px;
	bottom: 17px;
	width: 23px;
	height: 25px;
	background-image: url(images/icon-switch-leader.png);
	background-position: center;
	background-repeat: no-repeat;
}
.monster .switch-leader:hover
{
	box-shadow: red 0 0 5px;
}
.monster .switch-leader:active
{
	animation: icon-active 0.2s;
}
/*怪物-箱子统计*/
.monster .count-in-box
{
	position: absolute;
	left: 15px;
	top: -10px;
	color: white;
	text-shadow: black 0px 0px 2px,black -1px -1px 1px,black 1px 1px 1px,black 0px 3px 0;
	font-size: 19px;
}
.monster .count-in-box .same-id[data-same-id]::before
{
	content: "×"attr(data-same-id);
}
.monster .count-in-box .evo-tree[data-evo-tree]:not([data-evo-tree="0"])::before
{
	content: "("attr(data-evo-tree)")";
}

.emphasize-box-have .monster[data-box-have="0"]
{
	opacity: 0.45;
}
.emphasize-box-have .search-mon-list .monster[data-box-have="0"]
{
	filter: grayscale(1);
}
.emphasize-box-have .monster[data-box-have="2"]
{
	opacity: 0.5;
}

body:not(.show-awoken-count):not(.solo) .formation-box .team-total-info, /*单个队伍血量统计*/
body:not(.show-awoken-count) .formation-box .team-ability, /*单个队伍三维*/
body:not(.show-awoken-count) .formation-box .team-awoken /*单个队伍觉醒统计*/
{
	display: none !important;
}
body:not(.show-awoken-count):not(.solo) .formation-box .team-bigbox
{
	margin-bottom: 5px;
}
body:not(.show-awoken-count):not(.solo) .formation-box .team-badge
{
	position: absolute;
	z-index: 10;
	right: 0;
}
/*辅助和队伍的每一只框架*/
.member, .acquisitus-awoken-icon{
	display: inline-block;
	position: relative;
	width: var(--head-block-width);
}
.formation-box .monster{
	margin: 4px; /*留给队长边框的*/
}
.team-assist, .team-members,.team-badge{
	display: inline-block;
}
/* 徽章，平时都隐藏 */
.team-badge li{
	display: inline-block;
}
.badge-radio{
	display: none;
}
.badge{
	display: none;
	cursor: pointer;
}
/* 显示所有徽章时则打开 */
.show-all-badges .badge{
	display: inline-block;
}
/* 选中的徽章平时也打开 */
.team-badge .badge-radio:checked+.badge{
	display: inline-block;
}
/*队伍的背景色*/
.team-1 .team-members,
.team-1 .team-latents,
.team-1 .team-box-name::before,
.team-1 .team-box-name::after
{
	background-color: var(--team-1-bgcolor);
}
.team-2 .team-members,
.team-2 .team-latents,
.team-2 .team-box-name::before,
.team-2 .team-box-name::after
{
	background-color: var(--team-2-bgcolor);
}
.team-3 .team-members,
.team-3 .team-latents,
.team-3 .team-box-name::before,
.team-3 .team-box-name::after
{
	background-color: var(--team-3-bgcolor);
}
.team-bigbox{
	position: relative;
	font-size:0;
	margin-bottom:10px;
}
.team-bigbox:last-of-type{
	margin-bottom:0;
}
/*队伍A、B的文字*/
.team-box-name::after,
.team-box-name::before
{
	font-size: 30px;
	font-weight: bold;
	text-align: center;
	line-height: 54px;
	white-space: pre-wrap;
	display: none;
	width: var(--head-block-width);
	height: var(--head-block-height);
}
.show-team-name-left .team-box-name::before,
.show-team-name-right .team-box-name::after
{
	display: inline-block;
}

.reverse-member-assist .team-box-name::after,
.reverse-member-assist .team-box-name::before
{
	vertical-align:top;
}
.team-1 .team-box-name::after,
.team-1 .team-box-name::before,
.team-1 .team-assist .member::after,
.team-1 .team-assist .member::before
{
	color: var(--team-1-color);
}
.team-2 .team-box-name::after,
.team-2 .team-box-name::before,
.team-2 .team-assist .member::after,
.team-2 .team-assist .member::before
{
	color: var(--team-2-color);
	/*vertical-align:top;*/
}
.team-3 .team-box-name::after,
.team-3 .team-box-name::before,
.team-3 .team-assist .member::after,
.team-3 .team-assist .member::before
{
	color: var(--team-3-color);
}
.team-box{
	display: inline-block;
	vertical-align:bottom;
}

.team-box .team-assist .member::after,
.team-box .team-assist .member::before
{
	width: var(--head-block-width);
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	position: relative;
}
/*平时的显示*/
.team-box .team-assist .member::after
{
	display: inline-block;
}
.team-box .team-assist .member::before
{
	display: none;
}
/*反向时的显示*/
.reverse-member-assist .team-assist .member::after
{
	display: none;
}
.reverse-member-assist .team-assist .member::before
{
	display: inline-block;
}

.formation-box .formation-total-info,
.formation-box .team-total-info
{
	font-size: 15px;
	vertical-align: bottom;
}
.formation-box .team-total-info
{
	display: inline-block;
}
/*各种信息统计的图标*/
.tIf-total-skill-boost,
.tIf-total-move,
.tIf-effect
{
	display: inline-block;
}
.tIf-total-hp .general::before,
.tIf-total-hp .awoken-bind::before,
.tIf-total-hp .reduce .reduce-scale::before,
.tIf-total-hp .reduce .general::before,
.tIf-total-hp .reduce .awoken-bind::before,
.tIf-total-skill-boost .general::before,
.tIf-total-move .general::before,
.tIf-total-move .awoken-bind::before,
.tIf-effect icon::before,
icon.poison-no-effect::after,
.hp-range-table th::before
{
	content: " ";
	background-size: cover;
	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: bottom;
}
.tIf-total-hp .awoken-bind::before,
.tIf-total-hp .reduce .awoken-bind::before,
.tIf-total-move .awoken-bind::before,
.hp-range-table .awoken-bind th::before,
.hp-range-table .reduce-awoken-bind th::before
{
	background-image: url(images/icon-awoken-bind.png);
}

.tIf-total-hp .general::before,
.tIf-total-hp .reduce .general::before,
.hp-range-table .general th::before,
.hp-range-table .reduce-general th::before
{
	background-image: url(images/icon-HP.png);
}

.tIf-total-hp .reduce .reduce-scale::before,
.hp-range-table .reduce-scale th::before
{
	background-image: url(images/icon-reduce.png);
}
.tIf-total-hp .reduce .reduce-scale::after{
	content: "%⇔";
}
.tIf-total-hp .reduce.no-reduce .reduce-scale::after,
.hp-range-table .hp-range td span:after,
.hp-range-table .reduce-scale td span:after
{
	content: "%";
}
.tIf-total-hp .reduce.no-reduce .general,
.tIf-total-hp .reduce.no-reduce .awoken-bind
{
	display: none;
}

:where(:lang(en), :lang(ko)) :where(
	.tIf-total-hp .awoken-bind,
	.tIf-total-move .awoken-bind,
	.tIf-total-hp .reduce .reduce-scale,
)::before
{
	background-position-x: -20px;
}
.reduce-details
{
	cursor: pointer;
	vertical-align: bottom;
}
.reduce-details:hover
{
	box-shadow: red 0 0 3px;
}
.dialog-hp-detail
{
	margin-left: calc(50% - 200px);
	margin-top: 100px;
}
.hp-range-table
{
	font-family: var(--font-family);
	border: 1px solid white;
	background-color: saddlebrown;
}
.hp-range-table caption::before
{
	font-family: var(--game-font-family);
}
.hp-range-table td,
.hp-range-table th
{
	border: 1px solid white;
	padding: 0 4px;
}
.hp-range-table .hp-range th::before
{
	width: unset;
	height: unset;
}
.hp-range-table[data-attr="0"]
{
	background-color: crimson;
}
.hp-range-table[data-attr="1"]
{
	background-color: cornflowerblue;
}
.hp-range-table[data-attr="2"]
{
	background-color: green;
}
.hp-range-table[data-attr="3"]
{
	background-color: goldenrod;
}
.hp-range-table[data-attr="4"]
{
	background-color: purple;
}

.tIf-total-skill-boost .general::before{
	background-image: url(images/icon-sb.png);
}
.tIf-total-move .general::before{
	background-image: url(images/icon-orb-move-time.png);
}
/*固定手指的情况*/
.tIf-total-move.fixed-move-time .awoken-bind
{
	display: none;
}
.tIf-total-move.fixed-move-time{
	position: relative;
}
.tIf-total-move.fixed-move-time::after {
	content: " ";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url(images/icon-latent.png);
	background-position-x: -32px;
	transform: scale(0.5);
	position: absolute;
	left: 0;
	top: 0;
}

@keyframes hidden-visible-animate{
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}
icon.poison-no-effect::after
{
	background-image: url(images/icon-bind.png);
	position: absolute;
	left: 0;
	top: 0;
	animation: hidden-visible-animate 0.5s infinite ease-in alternate;
}
/*单人时的协力觉醒和多人时的掉落觉醒显示无效*/
body.solo .awoken-icon[data-awoken-icon="30"]::after,
body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
{
	content: " ";
	display: inline-block;
	width: 32px;
	height: 32px;
	background-image: url(images/icon-bind.png);
	background-size: cover;
	animation: hidden-visible-animate 0.5s infinite ease-in alternate;
}

.tIf-effect icon
{
	position: relative;
}
icon._76board::before
{
	background-image: url(images/icon-76board.png);
}
icon.no-skyfall::before
{
	background-image: url(images/icon-no-skyfall.png);
}
icon.poison-no-effect::before
{
	background-image: url(images/icon-poison.png);
}
icon.add-combo
{
	margin-right: 7px;
}
icon.add-combo::before
{
	background-image: url(images/icon-add-combo.png);
}
icon.add-combo::after
{
	color: white;
	text-shadow: black 1px 1px 0,black -1px 0px 0,black 0 0 1px;
	font-family: var(--game-font-family);
	font-size: 12px;
	position: absolute;
	top: -7px;
	left: 10px;
	content: attr(data-add-combo);
}
icon.inflicts::before
{
	background-image: url(images/icon-inflicts.png);
}
icon.inflicts::after
{
	content: attr(data-inflicts);
}

/*队伍内属性、type的个数统计*/
.tIf-rarity,
.tIf-attrs,
.tIf-types
{
	display: inline-block;
	vertical-align: top;
}
.tIf-rarity>li,
.tIf-attrs>li,
.tIf-types>li
{
	display: inline-block;
}
.tIf-attrs icon.attr,
.tIf-types icon.type-icon
{
	position: relative;
	font-family: var(--game-font-family);
	color: white;
	line-height: 32px;
	font-size: 16px;
	margin-right: 3px;
}
.tIf-attrs icon.attr:not([data-value]),
.tIf-types icon.type-icon:not([data-value]),
.tIf-attrs icon.attr[data-value="0"],
.tIf-types icon.type-icon[data-value="0"]
{
	display: none;
}
.tIf-attrs icon.attr::before,
.tIf-types icon.type-icon::before
{
	content: "x"attr(data-value);
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 16px;
	line-height: 17px;
	-webkit-text-stroke: 1px black;
	text-stroke: 1px black;
	text-shadow: black 1px 1px 1px;
}
.tIf-rarity icon
{
	line-height: 32px;
	font-size: 25px;
	font-family: var(--game-font-family);
}
.tIf-rarity icon::before
{
	content: attr(data-value)"★";
	color: gold;
	-webkit-text-stroke: 1px black;
	text-stroke: 1px black;
	text-shadow: black 1px 1px 1px;
}

/*队伍的潜觉*/
.team-latents .latents{
	width: var(--head-block-width);
	display: inline-block;
	vertical-align: top;
}
.team-latents .latent-ul{
	width: 152px;
	transform: scale(0.65);
	transform-origin: left top;
	margin-left: 4px;
	margin-bottom: calc(-64px * (1 - 0.65) + 1px);
	/*margin: calc(-64px * (1 - 0.63) / 2 + 3px) calc((108px - 152px) / 2);*/
	/*-152 * (1 - 0.63) + 108 - 152 * 0.63，化简为108 - 152*/
	min-height: 47px; /* 为了防止只有一层6格大潜觉的时候，被缩减太多的问题*/
	/*潜在觉醒布局，使用 gird*/
	display: grid;
	grid-template: repeat(2, 32px) / repeat(3, 32px);
	/*grid-template-columns: repeat(3, 32px);
	grid-template-rows: repeat(2, 32px);*/
	grid-auto-flow: column;
	grid-gap: 3px 6px;
	place-content: start center;
}
.team-latents .latent-ul.block-8{
	grid-template-columns: repeat(4, 32px);
}
.team-latents .latent-icon[data-latent-hole="1"] {
	grid-column: span 1;
}
.team-latents .latent-icon[data-latent-hole="2"] {
	grid-column: span 1;
	grid-row: span 2;
}
.team-latents .latent-icon[data-latent-hole="6"] {
	grid-column: span 3;
	grid-row: span 2;
}
.team-latents .latent-icon[data-latent-hole="6"]::before,
.team-latents .latent-icon[data-latent-hole="6"]::after
{
	transform: scale(1.54);
	margin: calc(32px / 4);
}

/*队长的边框*/
.team-box .team-members .team-leader .monster
{
	border-radius: 10px;
	border-width:4px;
	border-style:solid;
	box-sizing: initial;
	margin: 0;
}
.team-1 .team-members .team-leader .monster
{
	border-color: var(--team-1-color);
}
.team-2 .team-members .team-leader .monster
{
	border-color: var(--team-2-color);
}
.team-3 .team-members .team-leader .monster
{
	border-color: var(--team-3-color);
}

/*三维计算值*/
.team-ability::after,
.team-ability::before,
.team-ability .abilitys
{
	padding-left: 5px;
	box-sizing: border-box;
	font-size: 15px;
	width: var(--head-block-width);
}
.team-ability .abilitys
{
	display: inline-block;
}
.team-ability::after,
.team-ability::before
{
	display: none;
	content: "";
}
.abilitys .hp::before,
.abilitys .atk::before,
.abilitys .rcv::before
{
	width: 45px;
	display: inline-block;
}
/*.abilitys .hp::before{
	content: "HP：";
}
.abilitys .atk::before{
	content: "攻击：";
}
.abilitys .rcv::before{
	content: "回复：";
}*/
.types-ul {
	display: grid;
	grid-auto-flow: column;
}
/*队员觉醒统计*/
.member-awoken,
.member-types
{
	width: var(--head-block-width);
	display: inline-block;
	vertical-align: top;
}
.team-member-awoken,
.team-assist-awoken
{
	margin-top: 3px;
	display : none;	
}
.member-awoken .awoken-ul,
.member-types .types-ul
{
	grid-auto-rows:  25.6px;
	place-content: start center;
}
.member-awoken .awoken-ul
{
	grid-gap: 2px;
	grid-template-columns: repeat(3, 25.6px);
}
.member-awoken .awoken-icon,
.member-types .type-icon
{
	filter: unset;
	transform: scale(0.80);
	margin: calc(-32px * (1 - 0.80) / 2);
}
.tIf-addition-info,
.team-assist-awoken,
.team-member-awoken,
.team-member-types
{
	display : none;	
}
.show-mon-awoken .tIf-addition-info,
.show-mon-awoken .team-assist-awoken,
.show-mon-awoken .team-member-awoken,
.show-mon-awoken .team-member-types
{
	display : block;	
}
.show-mon-awoken .monster .super-awoken
{
	filter: grayscale(100%);
}

/*编辑窗口*/
.blur-bg{
	pointer-events: none; /*打开编辑窗后禁止后方有鼠标反应*/
}
 /*因为火狐还不支持 backdrop-filter 此部分只对火狐生效*/
@-moz-document url-prefix(){
	.blur-bg{
		filter: blur(5px);
	}
	.guide-mod .blur-bg{
		filter: unset;
	}
}

.edit-box{
	background-color: rgba(82, 53, 30, 0.8);
	color: white;
	position: absolute;
	left:0;
	top:0;
	width:100%;
	box-sizing: border-box;
	min-width:664px;
	
	backdrop-filter: blur(5px);
}
.guide-mod .edit-box{
	background-color: rgb(102, 73, 50);
	backdrop-filter: unset;
}
.edit-box-title{
	text-align: center;
	font-size: 2em;
	font-weight: bold;
}
/*.guide-mod .edit-box-title,
.guide-mod .button-box .button-null,
.guide-mod .button-box .button-delay,
.guide-mod .button-box .button-done
{
	display: none;
}*/

/*.edit-box .edit-box-title::before{
	content: "修改队员";
}
.edit-box .edit-box-title.edit-box-title-assist::before{
	content: "修改辅助";
}*/
.edit-box .monsterinfo-box{
	font-family: var(--game-font-family);
	color: white;
	text-shadow: black 2px 2px 0;
	min-height: 100px;
	background-image: linear-gradient(#798421,#394914);
	border-top: #B1BB39 solid 4px;
	border-bottom: #72941D ridge 7px;
	box-shadow: black 0 3px 3px;
	padding: 5px 10px;
}
.edit-box .search-box,
.edit-box .setting-box{
	padding: 10px;
	position: relative;
}
/*.edit-box .setting-box .row-mon-id::before{
	content: "▼怪物ID";
}*/
.edit-box .setting-box .row-mon-id .m-id{
	box-sizing: border-box;
	font-size: 25px;
	height: 40px;
	width: calc(100% - 50px);
}
.edit-box .setting-box .row-mon-id .search-by-string{
	box-sizing: border-box;
	font-size: 25px;
	height: 40px;
	width: 45px;
	margin-left: 5px;
	padding: 0;
}
.edit-box .setting-box .row-mon-id .search-by-string::before{
	content: "🔍";
}
.edit-box .setting-box .row-mon-id .unable-monster{
	pointer-events: none;
	opacity: 0.5;
}
.edit-box .setting-box .row-mon-id .unable-monster .monster{
	box-sizing: border-box;
	border: 5px solid red;
	border-radius: 10px;
	overflow: hidden;
}
.edit-box .setting-box .row-mon-id .unable-monster .id{
	display: none;
}
.edit-box .setting-box .row-mon-id .search-button{
	width: 100%;
	height: 40px;
	font-size: 25px;
}
.edit-box .setting-box .row-mon-id .evo-card-list>li,
.edit-box .search-box .search-mon-list>li
{
	display: inline-block;
	vertical-align: top;
	margin: 2px;
}
.detail-mon{
	display: inline-block;
	vertical-align: bottom;
}
.edit-box .setting-box .row-mon-id .evo-card-list .monster,
.edit-box .search-box .search-mon-list .monster,
.detail-mon .monster,
.mask-evolutionary-tree .evo-panel-left>.monster-head>.monster
{
	float: none;
	transform: scale(0.75);
	margin: calc(-100px * (1 - 0.75) / 2);
}
.edit-box .setting-box .row-mon-id .evo-card-list .monster .id,
.edit-box .search-box .search-mon-list .monster .id,
.detail-mon .monster .id{
	bottom: 5px;
	font-size: 20px;
}
.edit-box .setting-box .row-mon-id .evo-card-list .monster
{
	transform: scale(0.6);
	margin: calc(-100px * (1 - 0.6) / 2);
}
.edit-box .setting-box .row-mon-id .evo-card-list .monster .id
{
	font-size: 1.4em;
	font-weight: bold;
	text-shadow: black -3px -3px 3px, black 3px -3px 3px, black -3px 3px 3px, black 3px 3px 3px, ;
}
.edit-box .search-box .search-mon-list .monster .level {
	bottom: 23px;
}
.edit-box .search-box .search-mon-list .monster .plus {
	top: 20px;
}

.detail-box .detail-mon{
	width: 50px;
	height: 50px;
}
.detail-box .detail-mon .monster{
	transform: scale(0.5);
	margin: calc(-100px * (1 - 0.5) / 2);
}
.detail-box .detail-mon .monster .id{
	font-weight: bold;
	font-size: 23px;
}
.detail-box .detail-mon .monster .id::before {
	font-size: 15px;
}
.detail-box .latent-icon {
	width: 32px;
	height: 32px;
	display: inline-block;
}
/*搜索结果显示觉醒列表的相关css*/
.awoken-preview .awoken-ul
{
	grid-template-columns: repeat(3, 24px);
	grid-auto-rows:  24px;
	grid-gap: 1px;
	place-content: start center;
}
.custom-addition .awoken-ul
{
	width: 75px;
}
.custom-addition ul
{
	display: inline;
}
.awoken-preview .awoken-ul>li,
.custom-addition .awoken-ul>li
{
	display: inline-block;
}
.awoken-preview .awoken-preview-superAwakenings{
	margin-top:3px;
	background-color: #432;
}
.awoken-preview .awoken-preview-superAwakenings .awoken-icon{
	opacity: 0.6;
}
.awoken-preview .awoken-ul>li,
.custom-addition .awoken-ul>li
{
	margin: 0.5px !important;
}
.awoken-preview .awoken-icon,
.custom-addition .awoken-icon,
.custom-addition .type-icon
{
	filter: unset;
	transform: scale(0.75);
	margin: calc(-32px * (1 - 0.75) / 2);
}

.cd-preview .cd-max,
.cd-preview .cd-min,
.cd-preview .cd-evo
{
	font-size: 14px;
}
.cd-preview .cd-min::after
{
	content: "-";
}
.cd-preview .cd-evo::before
{
	content: "↪";
	font-family: var(--icon-font-family);
}
.cd-preview .cd-evo.loop-evo-skill::after
{
	content: "⤴︎";
	font-family: var(--icon-font-family);
}
.cd-preview,
.add-show-CD-label
{
	color: lightblue;
}
.abilities-preview>li
{
	font-size: 14px;
}
.cd-preview::before,
.abilities-preview>li::before
{
	font-size: 10px;
	display: inline-block;
	width: 25px;
}
.add-show-abilities-with-awoken-label,
.abilities-with-awoken-preview>li
{
	color: #dfd;
}
.custom-addition
{
	font-size: 14px;
	max-width: 75px;
}


/*.setting-box .row-mon-id .open-search::before{
	content: "搜索怪物";
}
.search-box::before{
	content: "▼简易搜索";
}
*/
.search-box::before{
	font-weight: bold;
	font-size: 1.2em;
}
.search-box>div{
	margin-bottom: 5px;
}
.search-box .attrs-div-div>ul{
	display: block;
}
.search-box>div>ul>li{
	display: inline-block;
	vertical-align: top;
	font-size:16px;
}
.search-box .attr-list>li{
	overflow: hidden;
}
.search-box>div>ul>li>label{
	cursor: pointer;
	display: block;
	text-align: center;
}

.attrs-div .attr-list-1::before,
.attrs-div .attr-list-2::before,
.types-div::before,
.awoken-div::before,
.sawoken-div::before{
	/*float: left;*/
	font-size: 16px;
	/*width: 55px;*/
	margin-right: 3px;
	display: inline-block;
}
/*.search-box .attrs-div-div .attr-list-1::before{
	content: "属性1";
}
.search-box .attrs-div-div .attr-list-2::before{
	content: "属性2";
}
.search-box .attrs-div-div .fix-main-color-label::after{
	content: "限制属性1为主属性，属性2为副属性";
}*/
.attr-radio,
.attr-check,
.type-check,
.rare-check,
.sawoken-check
{
	display: none;
}
.attrs-div .attr-list{
	font-size:0;
}
.attrs-div .attr-list>li,
.qr-data-type-ul>li
{
	border: 1px solid white;
	border-left: none;
	background: #947244;
	display: inline-block;
	overflow: hidden;
}
.attrs-div .attr-list>li:hover,
.qr-data-type-ul>li:hover
{
	background: #E9CB9E;
}
.attrs-div .attr-list>li:first-of-type,
.qr-data-type-ul>li:first-of-type
{
	border-radius: 8px 0 0 8px;
	border-left: 1px solid white;
}
.attrs-div .attr-list>li:last-of-type,
.qr-data-type-ul>li:last-of-type
{
	border-radius: 0 8px 8px 0;
}
.attrs-div .attr-list>li>label
{
	width: 55px;
	text-align: center;
}
.attrs-div .attr-list input:checked+label,
.qr-data-type-ul>li input:checked+label
{
	background-color:#8C4242;
	box-shadow: inset black 0 0 5px;
	cursor: auto;
}

.attr-list-1{
	margin-bottom: 5px;
}
/*.search-box .types-div::before{
	content: "类型";
}*/
.types-div .type-list,
.types-div .latent-list,
.rare-div .rare-list
{
	display: inline-block;
}
.types-div .type-list input+label,
.sawoken-div .awoken-ul input+label,
.dialog-dungeon-enchance input[type="checkbox"]+label
{
	opacity: var(--search-icon-unchecked);
	cursor: pointer;
}
.types-div .type-list input:checked+label,
.sawoken-div .awoken-ul input:checked+label,
.dialog-dungeon-enchance input[type="checkbox"]:checked+label
{
	opacity: 1;
}

.types-div .type-and-or-label{
	margin-left: 10px;
	margin-right: 0;
}
.types-div .type-list>li
{
	position: relative;
}
.types-div .type-list>li:after
{
	content: "⚔️";
	font-size: 10px;
	position: absolute;
	right: 0;
	bottom: 0;
	display: none;
	pointer-events:none;
}
/*不同type允许的杀*/
.types-div .type-list.type-killer-5 li[data-type-icon="7"]:after,
.types-div .type-list.type-killer-4 li[data-type-icon="8"]:after,
.types-div .type-list.type-killer-4 li[data-type-icon="3"]:after,
.types-div .type-list.type-killer-7 li[data-type-icon="5"]:after,
.types-div .type-list.type-killer-8 li[data-type-icon="5"]:after,
.types-div .type-list.type-killer-8 li[data-type-icon="1"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="5"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="4"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="7"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="8"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="1"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="6"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="2"]:after,
.types-div .type-list.type-killer-1 li[data-type-icon="3"]:after,
.types-div .type-list.type-killer-6 li[data-type-icon="7"]:after,
.types-div .type-list.type-killer-6 li[data-type-icon="2"]:after,
.types-div .type-list.type-killer-2 li[data-type-icon="8"]:after,
.types-div .type-list.type-killer-2 li[data-type-icon="3"]:after,
.types-div .type-list.type-killer-3 li[data-type-icon="4"]:after,
.types-div .type-list.type-killer-3 li[data-type-icon="6"]:after
{
	display: block;
}
.types-div .latent-list .latent-icon
{
	cursor: pointer;
	box-shadow: none;
}
.types-div .latent-list .latent-icon:before
{
	margin-top: -3px;
	margin-bottom: -5px;
}
.rare-icon
{
	font-family: var(--game-font-family);
	color: white;
	width: 26px;
	height: 26px;
	box-sizing: border-box;
	line-height: 26px;
	position: relative;
	text-align: center;
	display: inline-block;
	cursor: pointer;
}
.rare-radio
{
	display: none;
}
.rare-radio[name="rare-low"]~.rare-icon
{
	opacity: var(--search-icon-unchecked);
}
.rare-radio[name="rare-low"]:checked~.rare-icon
{
	opacity: 1;
}
.rare-radio[name="rare-high"]:checked~.rare-icon
{
	opacity: var(--search-icon-unchecked);
}

.rare-icon::before
{
	content: "★";
	color: gold;
	text-shadow: goldenrod 0 0 2px;
	position: absolute;
	font-size: 26px;
	left: 0;
	top: 0;
}
.rare-icon::after
{
	color: white;
	text-shadow: black 0 0 4px;
	font-size: 18px;
	position: relative;
	left: 0;
	top: 0;
}
.rare-icon::after
{
	content: attr(data-rare-icon);
}
.search-box .rare-clear
{
	margin-left: 5px;
}

.search-box .awoken-option .selected-awokens{
	min-height: 32px;
	box-sizing: border-box;
	width: calc(100% - 90px);
	min-width: 320px;
	background-color: #00000044;
	border-radius: 6px;
	box-shadow: inset black 0 0 3px;
	display: inline-block;
	vertical-align: top;
}
/*.search-box .awoken-div::before{
	content: "觉醒";
}*/
.search-box .awoken-div,
.search-box .sawoken-div{
	vertical-align: top;
}
.search-box .awoken-div::before{
	display: none;
}
.search-box .awoken-div.official-awoken-sorting::before,
.search-box .sawoken-div.official-awoken-sorting::before
{
	display: inline-block;
	line-height: 26px;
	
}
.sawoken-div.official-awoken-sorting {
	margin-left: 10px;
}

.search-box .brown-button::before
{
	min-width: 80px;
	background-size: 100px 100px;
	background-position-y: 40px;
	vertical-align: top;
	font-size: 18px;
	line-height: 28px;
	padding: 0;
	vertical-align: top;
}
.search-box .rare-clear::before,
.search-box .special-add::before,
.search-box .special-clear::before,
.search-box .special-star::before
{
	min-width: 50px;
	font-size: 14px;
	line-height: 20px;
}

@keyframes awoken-appear {
	0% {
		transform: scale(0);
	}
	50% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}
.selected-awokens .awoken-icon
{
	animation: awoken-appear 0.2s;
}
@keyframes icon-active {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1);
	}
}
.types-div .type-icon:active,
.rare-div .rare-icon:active,
.selected-awokens .awoken-icon:active,
.awoken-div .awoken-icon:active
{
	animation: icon-active 0.2s;
}
.awoken-ul
{
	display: grid;
	grid-template-columns: repeat(auto-fill, 32px);
	grid-auto-rows: 32px;
	grid-gap: 5px;
}
.official-awoken-sorting .awoken-ul {
	grid-template-columns: repeat(9, 32px);
}
.official-awoken-sorting {
	display: inline-block;
}
.team-awoken .awoken-ul,
.formation-awoken .awoken-ul {
	grid-template-columns: repeat(auto-fill, 67px);
}
.awoken-ul .awoken-count
{
	font-family: var(--game-font-family);

	grid-column: span 1;
	grid-row: span 1;
	font-size: 16px;
	line-height: 32px;
	white-space: nowrap;
}
.awoken-ul .count::before
{
	content: "×";
}
.awoken-icon
{
	position: relative;
	border: none;
	background-color: unset;
	font-family: var(--game-font-family);
	color: white;
	line-height: 32px;
	font-size: 16px;
	padding: 0;
	text-align: left;
}

.search-box .awoken-div .awoken-icon:not([data-awoken-count]),
.search-box .awoken-div .awoken-icon[data-awoken-count="0"]
{
	opacity: var(--search-icon-unchecked);
}

.awoken-icon:not([data-awoken-count="0"])::before
{
	content: attr(data-awoken-count);
	display: inline-block;
	position: absolute;
	line-height: 18px;
	font-size: 18px;
	right: 0;
	bottom: 0;
	-webkit-text-stroke: 1px black;
	text-shadow: black 1px 1px 1px;
}
.search-box .awoken-ul .awoken-count.zero{
	opacity: var(--search-icon-unchecked);
}
.search-box .awoken-ul .count{
	width: 1em;
	height: auto;
}
.search-box .awoken-ul .awoken-count .awoken-icon,
.search-box .awoken-ul .awoken-count .count-symbol,
.search-box .awoken-ul .awoken-count .count-symbol .count
{
	cursor: pointer;
	display: inline-block;
	vertical-align: bottom;
}
.search-box .awoken-ul .awoken-count.zero .count-symbol,
.search-box .awoken-ul .awoken-count.zero .count-symbol .count
{
	cursor: auto;
}
/*.search-box .sawoken-div::before{
	content: "超觉醒";
}*/

.sawoken-div .awoken-ul .awoken-count
{
	margin-right: 5px;
	margin-top: 5px;
	display: inline-block;
}
.sawoken-div summary {
	display: inline list-item;
}

.special-filter-list>li{
	margin-bottom: 5px;
	margin-right: 3px;
}
.special-filter-list select{
	font-size: 20px;
	max-width: 100%;
	box-sizing: border-box;
}

.control-div button{
	font-size: 20px;
}
.control-div .search-start{
	float: right;
	margin-left: 5px;
}
/*.control-div .search-start::before{
	content: "开始搜索";
}
.control-div .search-clear::before{
	content: "清空搜索条件";
}
.control-div .search-close::before{
	content: "关闭搜索";
}*/

.search-box .search-mon-list{
	border: 1px solid white;
	border-radius: 5px;
	background: grey;
	width: 100%;
}
.search-box .search-list-length
{
	float: right;
}
.search-box .search-list-length[data-search-result-count="0"]
{
	display: none;
}
.search-box .search-list-length:not([data-search-result-count="0"])::after
{
	content: attr(data-search-result-count);
}
.guide-mod .search-box .search-mon-list{
	max-height: 790px;
	overflow: auto;
}

.setting-box .row-mon-id .real-time-change-card-label
{
	margin-right: 0;
	margin-left: 5px;
}
.setting-box .row-mon-id .open-search{
	float: right;
}
.can-assist-label,
.sort-reverse-label
{
	margin-left: 5px;
}

.edit-box .setting-row{
	width: 100%;
}
.monsterinfo-box .monster-head{
	float: left;
	margin-right:5px;
}
.monsterinfo-box .monsterinfo-line>div
{
	display:inline-block;
	vertical-align: top;
	font-size: 22px;
	line-height: 22px;
}
.monsterinfo-box .monster-id{
	width:120px;
}
.monsterinfo-box .monster-seriesId,
.monsterinfo-box .monster-collabId,
.monsterinfo-box .monster-altName
{
	cursor: pointer;
	font-size: 14px;
	line-height: 16px;
	vertical-align: bottom;
	max-width: 270px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}
.monsterinfo-box .monster-seriesId::after,
.monsterinfo-box .monster-collabId::after
{
	content: attr(data-value);
}
.monsterinfo-box .monster-seriesId:hover::after,
.monsterinfo-box .monster-collabId:hover::after,
.monsterinfo-box .monster-altName:hover::after
{
	content: attr(data-value) "🔍";
}
.monsterinfo-box .monster-altName:hover::after
{
	content: "🔍";
}
/*.monsterinfo-box .monster-id::before{
	content: "No.";
}*/

.monsterinfo-box .monster-rare{
	width: 260px;
}
.monsterinfo-box .monster-rare::before,
.monsterinfo-box .monster-rare::after
{
	color:gold;
	text-shadow: black 0 0 3px,black 0 2px 3px;
}
.monsterinfo-box .monster-rare::before
{
	display: inline-block;
	width: 30px;
	text-align: right;
}
.monster-rare[data-rarity='1']::after{content: "★";}
.monster-rare[data-rarity='2']::after{content: "★★";}
.monster-rare[data-rarity='3']::after{content: "★★★";}
.monster-rare[data-rarity='4']::after{content: "★★★★";}
.monster-rare[data-rarity='5']::after{content: "★★★★★";}
.monster-rare[data-rarity='6']::after{content: "★★★★★★";}
.monster-rare[data-rarity='7']::after{content: "★★★★★★★";}
.monster-rare[data-rarity='8']::after{content: "★★★★★★★★";}
.monster-rare[data-rarity='9']::after{content: "★★★★★★★★★";}
.monster-rare[data-rarity='10']::after{content: "★★★★★★★★★★";}
.monster-rare::before{content: attr(data-rarity);}

.monsterinfo-box .monster-mp::before
{
	content: " ";
	background-image: url(images/icon-MP.png);
	background-size: cover;
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: top;
}

.monsterinfo-box .monster-type {
	display: inline;
}
.monsterinfo-box .monster-type .type-name{
	display:inline-block;
	margin-right: 10px;
}
.monsterinfo-box .monster-type .type-icon{
	margin-right:3px;
}
.monsterinfo-box .monster-type .type-name::after{
	vertical-align: middle;
	font-size: 22px;
	line-height: 22px;
}

/*
.edit-box .setting-box .row-mon-awoken::before{
	content: "▼怪物觉醒";
}
*/
.row-mon-awoken{
	margin-right: 20px;
}
.row-mon-awoken .awoken-count-num{
	display: inline-block;
	transform: scale(0.84) translateY(-2px);
}
.edit-box .awoken-ul .awoken-icon,
.row-mon-awoken .awoken-count-num
{
	cursor: pointer;
}
.row-mon-awoken .awoken-count-num,
.row-mon-awoken .awoken-icon
{
	vertical-align: top;
}


/*选中的觉醒后面部分半透明，前面的不透明*/
.row-mon-awoken input[type="radio"]
{
	display: none;
}
.row-mon-awoken input[type="radio"]:checked~label
{
	opacity: var(--search-icon-unchecked);
}

/*.edit-box .setting-box .row-mon-super-awoken::before{
	content: "▼超觉醒";
}*/

.row-mon-awoken,
.row-mon-super-awoken
{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
}
.row-mon-awoken .awoken-ul,
.row-mon-super-awoken .awoken-ul
{
	grid-template-columns: repeat(10, 32px);
}
.row-mon-awoken .awoken-count-num,
.row-mon-awoken .awoken-icon,
.row-mon-super-awoken .awoken-icon
{
	grid-column: span 1;
	grid-row: span 1;
}

/*未选中的超觉醒半透明，选中的不透明*/
.row-mon-super-awoken .sawoken-choice{display:none;}
.row-mon-super-awoken .sawoken-choice+label
{
	opacity: var(--search-icon-unchecked);
}
.row-mon-super-awoken .sawoken-choice:checked+label
{
	opacity: unset;
}
/*怪物能力横条*/
/*.row-ability{
	border-color: #D5AF5B;
	border-style: solid;
	border-width: var(--border-width);
	border-radius: 8px;
	background-color: #B68E4A;
	background-image: radial-gradient(ellipse at top,#B68E4A, #60492C);
}*/

/*.edit-box .setting-box .row-mon-ability::before{
	content: "▼怪物能力";
}*/
.row-mon-ability ul{
	margin-top: var(--border-width);
}
.row-mon-ability ul li::before{
	width: 2.5em;
	display: inline-block;
}
.row-mon-ability .ability-value{
	width: 4em;
	display: inline-block;
	text-align: right;
}

.edit-box .setting-box .row-mon-plus::before{
	/*content: "▼怪物加值";*/
	display:block;
}

.row-mon-ability ul,
.row-mon-plus ul,
.row-mon-level .level-value,
.row-mon-level .monster-cost,
.row-mon-plus li
{
	font-family: var(--game-font-family );
	font-size: 20px;
	line-height: 28px;
	text-shadow: black 2px 2px 0;
}
.row-mon-level .monster-cost
{
	background-color: #2F2B28;
	border: solid 3px #563E22;
	border-radius: 12px;
	padding: 0 5px;
	font-size: 0.8em;
	box-shadow: inset 0 3px 3px black;
}
.row-mon-plus .plus-box{
	border-color: #A07740;
	border-style: solid;
	border-width: var(--border-width);
	border-radius: 8px;
	background-color: #44392C;
	box-shadow: inset black 0 3px 5px;
	white-space: nowrap; /*避免纵向297跑到下一行*/
}
.row-mon-plus li{
	padding: 0 5px;
}
/*.m-plus-hp-li::before{content: "HP";}
.m-plus-atk-li::before{content: "攻击";}
.m-plus-rcv-li::before{content: "回复";}*/
.row-mon-plus .plus-value{
	color: yellow;
}
.row-mon-plus .plus-value::before{content: "(+";}
.row-mon-plus .plus-value::after{content: ")";}

.row-mon-plus .plus-value input
{
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-shadow: inherit;
	box-sizing: border-box;
	width: 2em;
	line-height: 28px;
	height: 28px;
	padding: 0;
	-moz-appearance: textfield; /*火狐去掉数字加减*/
}
 /*webkit去掉数字加减*/
.row-mon-plus .plus-value input::-webkit-outer-spin-button,
.row-mon-plus .plus-value input::-webkit-inner-spin-button{
	-webkit-appearance: none !important;
	margin: 0;
}
.row-mon-plus .m-plus-fast-setting::before
{
	content: "+"attr(value);
}
.row-mon-plus .m-plus-fast-setting
{
	padding: 0 3px;
	box-sizing: border-box;
	font-size: inherit;
	line-height: 20px;
	height: 30px;
}
.m-plus-btn-297 span{
	/*Chrome浏览器不支持按钮本身的纵向，只能加一层*/
	-webkit-writing-mode: vertical-lr;
}
.row-mon-plus .plus-box ul
{
	display: inline-block;
	vertical-align: top;
}
/*.edit-box .setting-box .row-mon-level::before{
	content: "▼怪物等级";
}*/
.row-mon-level
{
	margin-left: 10px;
}
.row-mon-level .level-value::before,
.row-mon-level .m-level-btn-min::before,
.row-mon-level .m-level-btn-max::before,
.row-mon-level .m-level-btn-110::before,
.row-mon-level .m-level-btn-120::before
{
	content: "Lv.";
}
.row-mon-level .subrow
{
	font-family: var(--game-font-family );
	font-size: 22px;
	line-height: 35px;
}
/*.row-mon-level .level-value::before{
	content: "Lv.";
}*/
.edit-box .setting-box .m-level
{
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	text-shadow: inherit;
	box-sizing: border-box;
	line-height: inherit;
	width: 100px;
	height: 40px;
}
.m-level-btn-min,
.m-level-btn-max,
.m-level-btn-110,
.m-level-btn-120
{
	box-sizing: border-box;
	font-size: 18px;
	padding: 0 3px;
}
.row-mon-level .m-level-btn-min::after,
.row-mon-level .m-level-btn-max::after
{
	content: attr(value);
}
.row-mon-level .m-level-btn-110::after
{
	content: attr(value) " (+" attr(data-limit-break-incr) "%)";
}
.row-mon-level .m-level-btn-120::after
{
	content: attr(value);
}
.m-level-btn-110
{
	color: blue;
}
.m-level-btn-120
{
	color: green;
}
/*
.m-level-exp::before{
	content: "需要经验：";
}
.m-level-btn-max::before{
	content: "最高Lv";
}
*/

.row-mon-ability,
.row-mon-plus,
.row-mon-level
{
	display: inline-block;
	box-sizing: border-box;
	vertical-align: top;
}
.m-level,
.m-plus-hp,.m-plus-atk,.m-plus-rcv,
.m-skill-level
{
	border: 1px solid grey;
	background: none;
}
/*.edit-box .setting-box .row-mon-latent::before{
	content: "▼潜在觉醒";
}
*/
.row-mon-latent .latent-ul-div{
	text-align: center;
}
.row-mon-latent .latent-ul{
	background: rgba(88,75,56,154);
	border: 2px ridge #94733f;
	border-radius: 7px;
	padding: 3px;
	/*潜在觉醒布局，使用 gird*/
	display: inline-grid;
	grid-template-columns: repeat(6, 32px);
	grid-auto-rows: 32px;
	grid-gap: 12px;
}
.row-mon-latent .latent-ul.block-8 {
	grid-template-columns: repeat(8, 32px);
}
/*没有block-8的，7格开始不显示*/
.latent-ul:not(.block-8)>.latent-icon:nth-of-type(n+7) {
	display: none;
}
.row-mon-latent .latent-icon[data-latent-hole="1"] {
	grid-column: span 1;
}
.row-mon-latent .latent-icon[data-latent-hole="2"] {
	grid-column: span 2;
}
.row-mon-latent .latent-icon[data-latent-hole="6"] {
	grid-column: span 6;
}
.latent-icon[data-latent-hole="2"]+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon+.latent-icon,
.latent-icon[data-latent-hole="6"]+.latent-icon+.latent-icon+.latent-icon+.latent-icon+.latent-icon
{
	display: none;
}

.m-latent-allowable-ul{
	margin-bottom: 5px;
	display: grid;
	grid-template-columns: repeat(auto-fill, 32px);
	grid-auto-rows: 32px;
	grid-gap: 4px;
}
.m-latent-allowable-ul .latent-icon{
	grid-column: span 1;
	grid-row: span 1;
}
.m-latent-allowable-ul .latent-icon:last-of-type{
	margin-right: unset;
}

/*没有打觉醒的空格，没有手指*/
.m-latent-allowable-ul .latent-icon,
.latent-ul .latent-icon[data-latent-icon]{
	cursor: pointer;
}
/*不允许使用的潜觉，不是手指，半透明，灰度*/
.awoken-icon.unallowable-awoken,
.latent-icon.unallowable-latent
{
	cursor: default;
	opacity: var(--search-icon-unchecked);
	filter: grayscale(100%);
}

.edit-box .setting-box .row-mon-skill
{
	margin-bottom:5px;
}
/*.edit-box .setting-box .row-mon-skill,
.edit-box .setting-box .row-mon-leader-skill
{
	margin-top:5px;
}*/
/*.skill-box .skill-cd::before{
	content: "冷却回合：";
}
.skill-box .skill-level-label::before{
	content: "Lv";
}
.skill-box .m-skill-lv-1::before{
	content: "Lv";
}
.skill-box .m-skill-lv-max::before{
	content: "最高Lv";
}*/
.skill-box .m-skill-lv-1::after,
.skill-box .m-skill-lv-max::after
{
	content: attr(value);
}
.skill-box
{
	font-family: var(--game-font-family);
	font-size: 16px;
	border: #9C743E solid 2px;
	border-radius: 10px;
	background-color: #B1AAA0;
	overflow: hidden;
	box-shadow: inset black 0 0 5px;
}
.row-mon-leader-skill .skill-box{
	background-color: #D0CD81;
}
.skill-box .m-skill-level {
	height: 30px;
	width: 3.5em;
	line-height: 25px;
	box-sizing: border-box;
	font-size: inherit;
	font-family: inherit;
	color: inherit;
	text-shadow: inherit;
}
.skill-box .m-skill-lv-1,
.skill-box .m-skill-lv-max{
	padding: 0 3px;
	/*height: 30px;*/
	box-sizing: border-box;
	font-size: 18px;
}
.skill-box .skill-title{
	background-color: #39180F;
	box-shadow: inset black 0 5px 5px;
	padding: 0 10px 0 2px;
	text-shadow:black 3px 3px 0;
}
.skill-box .skill-title .skill-name
{
	cursor: pointer;
}
.skill-box .skill-title .skill-name:hover::after
{
	content: "🔍";
}
/*主动技能、队长技能、进化技能的图形设置*/
.skill-title .type-title{
	background-color: #774433;
	border: #BBAA55 solid 2px;
	border-radius: 8px;
	margin-right: 5px;
	padding: 0 5px;
	line-height: 24px;
	display: inline-block;
	position: relative;
}
.skill-title .type-title::after{
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
	position: absolute;
	left: 5px;
}
.skill-title .type-title::before{
	text-shadow: none;
	-webkit-text-stroke: 3px black;
}
/* 主动技能 */
.row-mon-skill .type-title::after
{
	background-image: linear-gradient(white 25%, #3377AA 80%);
}
.row-mon-skill .skill-title .skill-name,
.evolved-skill-title .skill-name
{
	color: #84BAFC;
}
/* 队长技能 */
.row-mon-leader-skill .type-title::after
{
	background-image: linear-gradient(#FFFF99 25%, #EE7744 80%);
}
.row-mon-leader-skill .skill-title .skill-name{
	color: #85FD80;
}
/* 进化技能 */
.row-mon-skill .evolved-skill .type-title::after
{
	background-image: linear-gradient(#228899 25%, #44DDDD 80%);
}
.row-mon-skill .evolved-skill-title
{
	background-color: rgba(0,0,0,0.5);
	font-family: var(--game-font-family);
	font-weight: normal;
	color: white;
	padding: 0 10px 0 2px;
	text-shadow:black 2px 2px 0;
}
.evolved-skill-title .skill-level-label,
.evolved-skill-title .skill-cd,
.skill-box .skill-cd-control,
.skill-box .skill-parse-control
{
	float: right;
}

.skill-box .skill-cd{
	margin-left: 10px;
}
.skill-box:not(.show-skill-original) .skill-datail-original
{
	display: none;
}
.skill-datail-original,
.skill-datail-parsed{
	color: black;
	padding: 0 8px 6px 8px;
	line-height: 25px;
	white-space: break-spaces;
}
.skill-datail-parsed{
	font-family: var(--font-family);
	font-weight: bold;
}
.skill-datail-original
{
	border-bottom: #9C743E solid 2px;
}
.skill-datail-parsed .detail-search::before{
	content: "🔍";
}
.random-active-skill,
.evolved-active-skill
{
	padding-left: 1em;
}
.random-active-skill>li,
.evolved-active-skill>li
{
	list-style: decimal;
	border-bottom: 1px solid white;
}
.random-active-skill>li:last-of-type,
.evolved-active-skill>li:last-of-type
{
	border-bottom: unset;
}

.edit-box .button-box{
	border-top: black solid 3px;
	background-color: rgba(0,0,0,0.5);
	padding: 5px;
	height: 50px;
}
.edit-box .button-box .button-null,
.edit-box .button-box .button-delay,
.edit-box .button-box .button-cancel,
.edit-box .button-box .button-done{
	height: 50px;
	box-sizing: border-box;
	font-size: 25px;
	font-weight: bold;
}
.edit-box .button-box .button-null,
.edit-box .button-box .button-delay{
	float: left;
	margin-right:5px;
}
.edit-box .button-box .button-cancel,
.edit-box .button-box .button-done{
	float: right;
	margin-left:5px;
}
/*.edit-box .button-box .button-null::after{
	content: "留空格子";
}
.edit-box .button-box .button-delay::after{
	content: "应对威吓";
}
.edit-box .button-box .button-cancel::after{
	content: "取消修改";
}
.edit-box .button-box .button-done::after{
	content: "确认修改";
}
.edit-box .button-box .button-done.cant-assist::after{
	content: "不能辅助";
}*/
.formation-awoken::before,
.team-awoken::before
{
	font-size: 20px;
	margin-top:5px;
	/*content: "觉醒总计：";*/
}
.detail-box{
	margin-top:5px;
}
/*控制框*/
.control-box{
	margin-bottom: 10px;
}
.control-box>div
{
	margin-bottom: 2px;
}
.control-box .languages-label::before{
	content: "🌐Lanuage:";
}
.control-box .lbl-henshin-change,
.help-link
{
	display: inline-block;
}

.control-box .solo-link::before{
	content: "Jump To Solo Version";
}
.control-box .multi-link::before{
	content: "Jump To 2-Player Version";
}
/*
.control-box .btn-show-mon-skill-cd::before{
	content: "显示怪物ID";
}
.show-mon-skill-cd .control-box .btn-show-mon-skill-cd::before{
	content: "⬜隐藏已满技能CD";
}
.control-box .btn-show-mon-skill-cd::before{
	content: "❄️显示已满技能CD";
}
.control-box .lbl-henshen-change::before{
	content: "🕴️变身";
}
*/
.control-box .lbl-henshin-change button
{
	font-size: 1.5em;
}
.control-box .btn-henshin-back::before{
	content: "◀️";
}
.control-box .btn-henshin-forward::before{
	content: "▶️";
}
.control-box .btn-remove-assist{
	vertical-align: bottom;
}
.control-box .btn-remove-assist::before{
	content: "";
	background-image: url(images/icon-assist-bind.png);
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	width: 2em;
	height: 2em;
}
#interchange-line{
	pointer-events: none;
	position: absolute;
	left: 0;
	top: 0;
}
#interchange-line g line {
	fill: none;
	stroke: blue;
	stroke-linecap: round;
	stroke-width: 5;
	stroke-dasharray: 10;
}

/*面板相关*/
.board {
	display: inline-block;
	vertical-align: middle;
}
.board-set>span {
	cursor: pointer;
	margin: 0 3px;
}
.board-set>span::before {
	content: attr(data-column-count)"×"attr(data-row-count)"🔁";
}
.board.display-none+span {
	display: none;
}
/*因为比例不一样，为了保证高度一致，应该以高度来算而不是宽度来算*/
.skill-datail-parsed .board {
	/* 缩小的基础倍率 */
	--base-scale: 0.75;
	/* 画面缩小的倍率 */
	transform: scale(var(--scale));
	/* 缩小后内缩的范围 */
	margin: calc(-36px * var(--row) * (1 - var(--scale)) / 2) calc(-36px * var(--colum) * (1 - var(--scale)) / 2);
}
.skill-datail-parsed .board[data-row-count="5"] {
	--scale: calc(var(--base-scale) * 4 / 5);
	--colum: 6;
	--row: 5;
}
.skill-datail-parsed .board[data-row-count="6"] {
	--scale: calc(var(--base-scale) * 4 / 6);
	--colum: 7;
	--row: 6;
}
.skill-datail-parsed .board[data-row-count="4"] {
	--scale: calc(var(--base-scale) * 4 / 4);
	--colum: 5;
	--row: 4;
}
.board .orb
{
	transform: unset;
	margin: unset;
}
.board .orb.enhanced::after,
.board .orb.locked::after,
.board .orb.bound::after
{
	content: "";
	transform: unset;
}
.board .block {
	position: relative;
}
.block::before,
.block::after
{
	transform: scale(0.75);
	margin: -4px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	background-repeat: no-repeat;
}
.block::before {
	z-index: 1;
}
.board .orb {
	z-index: 5;
}
.block::after {
	z-index: 10;
	transition: opacity 0.3s;
}
.block:hover::after {
	opacity: 0.3;
}
/*轮盘位，在宝珠后面*/
.block.roulette::before
{
	content: "";
	background-image: url(images/icon-orbs.png);
	background-position-x:calc(-36px * 1);
	background-position-y:calc(-36px * 7);
	transform: scale(1);
}
/*云，在宝珠前面*/
.block.clouds::after
{
	content: "";
	background-image: url(images/icon-cloud-1.png);
	background-size: contain;
	transform: scale(1.2);
}
/*封条，在宝珠前面*/
.block.immobility::after
{
	content: "";
	background-image: url(images/icon-immobility.png);
	background-size: cover;
}
/*需要旋转的，比如封条*/
.block.rotate::after,
.block.rotate::before
{
	transform: rotate(90deg);
}
.orb-icon
{
	width: 20px;
	height: 20px;
	border: 1px black solid;
	border-radius: 50%;
	padding: 0;
	text-align: center;
	display: inline-block;
}
table .orb-icon
{
	display: table-cell;
}
.orb-icon::before
{
	font-size: 13px;
	line-height: 13px;
	display: block;
	max-height: 100%;
	max-width: 100%;
}
.orb-icon[data-orb-icon="0"]
{ /*火*/
	background-color: #ef3535;
}
.orb-icon[data-orb-icon="0"]::before
{
	content: "🔥";
}
.orb-icon[data-orb-icon="1"]
{ /*水*/
	background-color: #258bed;
}
.orb-icon[data-orb-icon="1"]::before
{
	content: "🌊";
}
.orb-icon[data-orb-icon="2"]
{ /*木*/
	background-color: #28c031;
}
.orb-icon[data-orb-icon="2"]::before
{
	content: "🍃";
}
.orb-icon[data-orb-icon="3"]
{ /*光*/
	background-color: #eded29;
}
.orb-icon[data-orb-icon="3"]::before
{
	content: "🌞";
}
.orb-icon[data-orb-icon="4"]
{ /*暗*/
	background-color: #972ecb;
}
.orb-icon[data-orb-icon="4"]::before
{
	content: "🦇";
}
.orb-icon[data-orb-icon="5"]
{ /*心*/
	background-color: #f8baba;
	border-radius: 3px;
}
.orb-icon[data-orb-icon="5"]::before
{
	content: "💗";
}
.orb-icon[data-orb-icon="6"]
{ /*废*/
	background-color: #d3d3d3;
	border-radius: 5px;
}
.orb-icon[data-orb-icon="6"]::before
{
	content: "🕷️";
}
.orb-icon[data-orb-icon="7"]
{ /*毒*/
	background-color: #e831f3;
	border-radius: 5px;
}
.orb-icon[data-orb-icon="7"]::before
{
	content: "💀";
}
.orb-icon[data-orb-icon="8"]
{ /*剧毒*/
	background-color: #670181;
	border-radius: 5px;
}
.orb-icon[data-orb-icon="8"]::before
{
	content: "☠️";
}
.orb-icon[data-orb-icon="9"]
{ /*炸弹*/
	background-color: #7c7c7c;
}
.orb-icon[data-orb-icon="9"]::before
{
	content: "💣";
}
.team-flags .team-member-icon {
	display: inline-block;
	border-width: 1px;
	border-style: solid;
	border-color: black;
	border-radius: 3px;
	width: 10px;
	height:10px;
}
.team-flags .team-member-icon:first-of-type,
.team-flags .team-member-icon:last-of-type
{
	border-top-width: 2px;
	border-color: darkred;
}
.team-flags .team-member-icon:first-of-type {
	margin-right: 1px;
}
.team-flags .team-member-icon:last-of-type {
	margin-left: 1px;
}

.team-flags.leader-self  .team-member-icon:first-of-type {
	background-color: pink;
}
.team-flags.leader-helper  .team-member-icon:last-of-type {
	background-color: pink;
}
.team-flags.sub-members  .team-member-icon:not(:first-of-type):not(:last-of-type) {
	background-color: lightgreen;
}
.team-flags.self  .team-member-icon:nth-of-type(4) {
	background-color: lightblue !important; 
}

/*.open-evolutionary-tree::before
{
	content: "⛓️进化链";
}*/
.search-evolution-by-this icon
{
	transform: scale(50%);
	margin: -8px;
}

.mask
{
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	background-color: rgba(0,0,0,0.8);
	z-index: 20;
}
.mask-content
{
	text-align: center;
}
.mask .control-button-box
{
	color: white;
}
.evo-box
{
	display: inline-block;
	text-align: left;
}
.evo-panel,
.evo-panel-left,
.evo-panel-right
{
	display: inline-block;
}
.mask-evolutionary-tree .evo-panel-left>.monster-head
{
	display: inline-block;
}
.evo-materials>li
{
	display: inline-block;
}
.mask-evolutionary-tree .evo-materials .monster
{
	transform: scale(0.60);
	margin: calc(-100px * (1 - 0.60) / 2);
}
.mask-evolutionary-tree .evo-panel-left>.monster-head>.monster .id
{
	bottom: 5px;
	font-size: 20px;
}
.mask-evolutionary-tree .evo-materials .monster .id
{
	bottom: 5px;
	font-size: 22px;
}
.evo-panel
{
	border:black 2px solid;
	border-radius: 7px;
	background-color: #DEAA76;
}
.evo-panel-left,
.evo-panel-right
{
	border:#D19635 2px solid;
	border-radius: 4px;
	height: 100px;
	vertical-align: top;
}
.evo-panel-left
{
	border-top-right-radius: unset;
	border-bottom-right-radius: unset;
	border-right: none;
	background-image: linear-gradient(#A16928, #5F3D16);
	padding: 0 2px;
	text-align: center;
}
.evo-panel-right
{
	border-top-left-radius: unset;
	border-bottom-left-radius: unset;
	border-left: none;
	background-image: url(images/slate.svg);
	background-size: 200px;
}
.evo-panel-right .monster-name
{
	font-family: var(--game-font-family);
	font-size: 15px;
	line-height: 15px;
	background: #42341F;
	border: 2px inset #F4F18E;
	border-radius: 5px;
	margin: 4px;
	padding: 5px;
}
.evo-materials
{
	margin: 0 4px;
}

.evo-materials .monster.null
{
	opacity: 0.5;
}
.evo-materials>li
{
	margin: 1px; 
}
.evo-subevo
{
	padding-left: 35px;
	padding-top: 5px; 
}
.evo-subevo>li
{
	position:relative;
}

.evo-subevo>li::before
{
	content:' ';
	position:absolute;
	top:0;
	left:-20px;
	width:15px;
	height:100%;
	border-left:3px solid #E88230;
}
.evo-subevo>li::after
{
	content:' ';
	position:absolute;
	top:43px;
	left:-10px;
	width:0;
	height:0;
	border-top: 8px solid transparent;
	border-left: 10px solid #FFEE71;
	border-bottom: 8px solid transparent;
}
.evo-subevo>li:last-child::before
{
	border-bottom: 3px solid #F3B750;
	border-bottom-left-radius: 8px;
	height:50px;
}
.evo-subevo>li:last-child>.evo-box::before
{
	display: none;
}
.evo-subevo>li>.evo-box::before
{
	content:' ';
	position:absolute;
	top:50px;
	left:-20px;
	width:18px;
	border:none;
	border-top:3px solid #E88230;

}

.evo-panel-left .evo-type,
.evo-panel-left .evo-type::after
{
	font-family: var(--game-font-family);
	font-size: 15px;
	line-height: 15px;
}
.evo-panel-left .evo-type
{
	display: inline-block;
	position: relative;
}
.evo-panel-left .evo-type::after
{
	-webkit-background-clip: text; /*垃圾Chrome，不支持无前缀的*/
	background-clip: text;
	color: transparent;
	position: absolute;
	left: 0;
}

.evo-panel-left .evo-type::before
{
	/*text-shadow: black 1px 1px 0,black -1px 1px 0,black 1px -1px 0,black -1px -1px 0;*/
	-webkit-text-stroke: 3px black; /*非W3C标准，但都支持*/
}

.control-box,
.control-box button
{
	font-family: var(--icon-font-family);
}
#default-level {
	width: 50px;
}

#qr-code-frame
{
	color: white;
}
#qr-code-frame .brown-button::before
{
	font-family: 'Font Awesome 5 Free';
	font-weight: normal;
	width: unset;
}
#qr-code-frame a
{
	color: white;
}
#qr-code-frame .string-input
{
	width: calc(100% - 170px);
	box-sizing: border-box;
}
#qr-code-frame .string-output
{
	width: calc(100% - 20px);
}
#qr-code-frame .qr-box
{
	margin: 5px;
}
.save-qr-box
{
		padding-bottom: 10px;
}

.read-qr-box::before,
.save-qr-box::before
{
	display: block;
	text-align: left;
}

.qr-data-type-ul .qr-data-type-radio
{
	display: none;
}
.qr-data-type-ul>li label
{
	font-size: 20px;
	padding: 5px;
}
.formation-from-string
{
	font-size: 1.5em;
	display: block;
}
.qr-code-image
{
	background-color: white;
}
.qr-data-type-ul .qr-data-type-radio
{
	display: none;
}
.qr-data-type-ul>li label
{
	font-size: 20px;
	padding: 5px;
}

#player-data-frame .player-box-title
{
	color: white;
	text-align: center;
	font-size: 2em;
	font-family: var(--icon-font-family);
}
#player-data-frame .brown-button::before
{
	font-family: var(--icon-font-family);
}
#player-data-frame .upload-data
{
	float: right;
	margin-right: 5px;
}
#player-data-frame .how-to-use
{
	color: white;
	font-weight: bold;
	font-size: 1.2em;
	margin-left: 15px;
}

.player-datas-list>li
{
	text-align: center;
}
.player-card
{
	display: inline-block;
	background-color: #C39350;
	background-image: url(images/slate.svg);
	background-size: 300px 300px;
	border: 3px solid black;
	border-radius: 15px;
	margin-top: 10px;
	padding: 5px;
	text-align: left;
	font-family: var(--game-font-family);
	border-spacing: 4px 0;
}
.player-card .delete::before
{
	content: "\f2ed";
	min-width: 40px;
}
.player-card .delete
{
	float: right;
}
.player-card .set-default
{
	vertical-align: bottom;
}
.player-card .name
{
	background-color: #E7D5BA;
	border: 1px solid #815C33;
	border-radius: 5px;
	padding: 0 5px;
	font-family: var(--font-family);
}
.player-card .name::before
{
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url(images/icon-orbs.png);
	background-position-y: 36px;
	background-repeat: no-repeat;
	vertical-align: bottom;
	transform: scale(0.5);
	margin: -9px;
	margin-right: -3px;
}
.player-card .name[data-camp="1"]::before
{
	background-position-y: 0;
}
.player-card .name[data-camp="2"]::before
{
	background-position-y: -36px;
}
.player-card .name[data-camp="3"]::before
{
	background-position-y: -72px;
}

.player-card .lvexp,
.player-card .stama,
.player-card .gold,
.player-card .coin
{
	background-color: #363331;
	border: #86663C 3px solid;
	padding: 0 5px 0 5px;
}
.player-card .lvexp,
.player-card .gold
{
	border-radius: 0  0 10px 10px;
	border-bottom: none;
	box-shadow:  inset black -2px 3px 3px;
}
.player-card .stama,
.player-card .coin
{
	border-radius: 10px 10px 0 0;
	border-top: none;
	box-shadow:  inset black -2px -3px 3px;
}

.player-card .lvexp::before,
.player-card .stama::before
{
	display: inline-block;
	width: 45px;
}
.player-card .lvexp .level,
.player-card .stama .sta_number
{
	width: 80px;
	margin-left: 5px;
}
.player-card .lvexp .level::before
{
	display: inline-block;
}
.player-card .gold,
.player-card .coin
{
	width: 190px;
}

.player-card tr:not(:first-of-type)
{
	text-shadow: black 1px 1px 1px;
}
.player-card .lvexp::before,
.player-card .lvexp .level
{
	color: #F2DA50;
}
.player-card .stama::before,
.player-card .stama .sta_number
{
	color: #29BCE9;
}
.player-card .stama .sta_number .sta_cur.stama-beyond
{
	color: #F66A01;
}
.player-card .gold
{
	color: #85FF8B;
}
.player-card .coin
{
	color: #E1E64E;
}

.player-card .lvexp .level,
.player-card .stama .sta_number
{
	display: inline-block;
}

.player-card .progress-bar
{
	display: inline-block;
	height: 8px;
	width: 150px;
	background-color: black;
	border-radius: 10px;
	box-shadow: inset white 0 -3px 2px;
	box-sizing: border-box;
	padding: 2px;
	position: relative;
}

.player-card .progress-bar .bar,
.player-card .progress-bar .bar2
{
	position: absolute;
	height: 100%;
	border-radius: 10px;
	box-shadow: inset black 0 -3px 2px;
}
.player-card .lvexp .bar
{
	background-color: #F2DA50;
}
.player-card .stama .bar
{
	background-color: #29BCE9;
}
.player-card .stama .bar2
{
	background-color: #F66A01;
}


.player-card .gold::before,
.player-card .coin::before
{
	content: "";
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url(images/icon-skills.png);
	background-position-y: calc(-36px * 30);
	background-repeat: no-repeat;
	vertical-align: top;
	transform: scale(0.75);
	margin: calc(-36px * (1 - 0.75) / 2);
}
.player-card .gold::before
{
	background-position-x: -36px;
}

.deck-line,
.deck,
.deck-radio-list
{
	text-align: center;
}
.deck>li,
.deck-radio-list>li
{
	display: inline-block;
	position: relative
}
.deck-radio-list input
{
	font-size: 2em;
	cursor: pointer;
}
.deck
{
	display: inline-block;
	margin-bottom: 10px;
}
.deck .monster
{
	transform: scale(0.75);
	margin: calc(-100px * (1 - 0.75) / 2 );
}
.deck .monster.assist
{
	left: 1px;
	bottom: -16px;
	position: absolute;
	transform: scale(0.4);
	margin: calc(-100px * (1 - 0.4) / 2 );
}
.player-datas-list [name="default-player-data"]:checked+.player-card
{
	background-color: #D55D34;
}
/*.base .evo-type::before,
.base .evo-type::after
{
	content: "基礎";
}
.evolution .evo-type::before,
.evolution .evo-type::after
{
	content: "進化";
}
.ult-evo .evo-type::before,
.ult-evo .evo-type::after
{
	content: "究極進化";
}
.reincarnation .evo-type::before,
.reincarnation .evo-type::after
{
	content: "轉生進化";
}
.pixel-evo .evo-type::before,
.pixel-evo .evo-type::after
{
	content: "像素進化";
	font-family: "zpix";
	font-weight: bold;
}
.assist-evo .evo-type::before,
.assist-evo .evo-type::after
{
	content: "輔助進化";
}
.super-reincarnation .evo-type::before,
.super-reincarnation .evo-type::after
{
	content: "超轉生進化";
}
.super-ult-evo .evo-type::before,
.super-ult-evo .evo-type::after
{
	content: "超究極進化";
}*/
.pixel-evo .evo-type::before,
.pixel-evo .evo-type::after
{
	font-family: "zpix";
	font-weight: bold;
}

.base .evo-type::after
{ /*基礎*/
	background-image: linear-gradient(#FFFFBB, #FFFF88);
}
.base
{
	background-color: #DCB476;
}
.base .evo-panel-right
{
	border-color: #FDC686;
}
.evolution .evo-type::after
{ /*進化*/
	background-image: linear-gradient(#CCFF33, #88EE22);
}
.evolution
{
	background-color: #C49669;
}
.evolution .evo-panel-right
{
	border-color: #DEAA76;
}
.ult-evo .evo-type::after
{ /*究極進化*/
	background-image: linear-gradient(#FFFFAA 20%,#BB8800, #FFFFAA 80%);
}
.ult-evo
{
	background-color: #DDD844;
}
.ult-evo .evo-panel-right
{
	border-color: #FEF84F;
}
.reincarnation .evo-type::after
{ /*轉生進化*/
	background-image: linear-gradient(#00CCCC, #EEFFFF 50%,#AA8800 51%,#FFFFAA);
}
.reincarnation
{
	background-color: #579889;
}
.reincarnation .evo-panel-right
{
	border-color: #78B89A;
}
.pixel-evo .evo-type::after
{ /*像素進化*/
	background-image: linear-gradient(#FFDD77 33%, #EEBB33 34%, #EEBB33 66%, #BB7700 67%);
}
.pixel-evo
{
	background-color: #B1AB94;
}
.pixel-evo .evo-panel-right
{
	border-color: #CBC4AA;
}
.assist-evo .evo-type::after
{ /*輔助進化*/
	background-image: linear-gradient(#AAFF66, #557700);
}
.assist-evo
{
	background-color: #607F38;
}
.assist-evo .evo-panel-right
{
	border-color: #6F9241;
}
.super-reincarnation .evo-type::after
{ /*超轉生進化*/
	background-image: linear-gradient(#EE7700 ,#FFFF88 40%, #1155AA);
}
.super-reincarnation
{
	background-color: #C15644;
}
.super-reincarnation .evo-panel-right
{
	border-color: #DE634F;
}
.super-ult-evo .evo-type::after
{ /*超究極進化*/
	background-image: linear-gradient(#553300,#FFCC00 45%, #FFFF99 55%, #771100);
}
.super-ult-evo
{
	background-image: linear-gradient(#C1D515,#DD7003);
}
.super-ult-evo .evo-panel-right
{
	border-color: #DBE721;
}
.evo-panel.henshin .evo-type::after,
.evo-panel.henshin-loop .evo-type::after
{ /*變身*/
	background-image: linear-gradient(#00FFFF 30%, #FF00FF);
}
.evo-panel.random-henshin .evo-type::after
{ /*随机變身*/
	background-image: linear-gradient(#00FFFF 30%, #FFF 60%, #FF00FF);
}
.evo-panel.henshin,
.evo-panel.random-henshin,
.evo-panel.henshin-loop
{
	background-image: linear-gradient(#BFFFCF,#FFFFBF,#FFBFBF);
}
.evo-panel.henshin .evo-panel-right,
.evo-panel.random-henshin .evo-panel-right,
.evo-panel.henshin-loop .evo-panel-right
{
	border-color: #7F00FF;
}

.dialog-dungeon-enchance
{
	margin-top: 100px;
	margin-left: calc(50% - 270px);
}
.dialog-dungeon-enchance .dialog-content>ul>li
{
	display: inline-block;
}
.dialog-dungeon-enchance .stats-list input
{
	width: 50px;
}
.dialog-dungeon-enchance .dialog-content>*
{
	margin-top: 5px;
}
.dialog-dungeon-enchance .stats-list>li
{
	margin-right: 5px;
}
.dialog-dungeon-enchance .dialog-control>button
{
	margin-right: 5px;
}

.icon-skill,
.icon-skill::after,
.icon-skill::before
{
	font-weight: normal;
	display: inline-block;
	width: 36px;
	height: 36px;
	background-image: url(images/icon-skills.png);
	background-repeat: no-repeat;
}
.icon-skill,
.attrs-div .attr-list .attr,
.skill-datail-parsed icon:where(.attr,.orb,.type-icon,.awoken-icon)
{
	vertical-align: bottom;
	transform: scale(0.75);
	margin: -4px;
	position: relative;
}
.skill-datail-parsed a.detail-search
{
	cursor: pointer;
	color: brown;
}
.skill-datail-parsed a.detail-search:hover
{
	background: rgba(150,110,10,0.5);
	border-radius: 5px;
}

.skill-datail-parsed .merge-board
{
	margin-top: 5px;
}
.skill-datail-parsed .board {
	border-collapse: collapse;
	background-color: #532;
	background-image: url(images/slate.svg);
	background-size: 100px 100px;
	background-attachment: scroll;
	background-position: 0 0;
	--board-light-color: unset;
	--board-deep-color: rgba(0,0,0,0.4);
}
.skill-datail-parsed .board td {
	padding: 0;
}
.skill-datail-parsed .board tr:nth-of-type(2n+1)>td:nth-of-type(2n+1),
.skill-datail-parsed .board tr:nth-of-type(2n)>td:nth-of-type(2n)
{
	background-color: var(--board-deep-color);
}

.card-skill-list .no-skyfall,
.card-skill-list .fixed-time,
.card-skill-list .min-match-len,
.row-mon-leader-skill .card-skill-list .board-size-change
{
	color: #ff3600;
}
.card-skill-list .skill-proviso
{
	color: blue;
}
.card-skill-list .skill-proviso
{
	border-bottom: 1px brown dashed;
}

.icon-skill.status-incr::after,
.icon-skill.status-decr::after,
.icon-skill.status-bind::after,
.icon-skill.hp-incr::after,
.icon-skill.hp-decr::after,
.icon-skill.boost-incr::after,
.icon-skill.boost-decr::after,
.icon-skill[data-icon-type="ctw"]::before,
.icon-skill[data-icon-type="ctw"]::after,
.icon-skill[data-icon-type="add-combo"]::after,
.icon-skill[data-icon-type="fixed-time"]::after
{
	content: "";
	position: absolute;
}
.icon-skill.status-incr::after,
.icon-skill.status-decr::after
{
	transform: scale(0.75);
	margin: -4px;
	right: -5px;
}
.icon-skill.status-incr::after
{
	top: -3px;
}
.icon-skill.status-decr::after
{
	bottom: -3px;
}
.icon-skill.status-bind::after,
.icon-skill[data-icon-type="unbind-matches"]::after,
.icon-skill[data-icon-type="attr-absorb"]::after,
.icon-skill[data-icon-type="combo-absorb"]::after,
.icon-skill[data-icon-type="damage-absorb"]::after,
.icon-skill[data-icon-type="damage-void"]::after,
.icon-skill[data-icon-type="bind-skill"]::after
{
	content: "";
	background-position-y:calc(-36px * 3);
	animation: hidden-visible-animate 0.8s infinite ease-out alternate;
}
.icon-skill.status-incr::after
{
	background-position-y:calc(-36px * 1);
}
.icon-skill.status-decr::after
{
	background-position-y:calc(-36px * 2);
}
.icon-skill.hp-incr::after,
.icon-skill.hp-decr::after
{
	background-position-x:calc(-36px * 1);
}
.icon-skill.hp-incr::after
{
	background-position-y:calc(-36px * 1);
}
.icon-skill.hp-decr::after
{
	background-position-y:calc(-36px * 2);
}
.icon-skill[data-icon-type="delay"]
{
	background-position-y:calc(-36px * 4);
}
.icon-skill[data-icon-type="mass-attack"]
{
	background-position-y:calc(-36px * 5);
}
.icon-skill[data-icon-type="leader-change"]
{
	background-position-y:calc(-36px * 6);
}
.icon-skill[data-icon-type="no-skyfall"]
{
	background-position-y:calc(-36px * 7);
}
.icon-skill[data-icon-type="heal"]
{
	background-position-y:calc(-36px * 8);
}
.icon-skill[data-icon-type="def-break"]
{
	background-position-y:calc(-36px * 9);
}
.icon-skill[data-icon-type="poison"]
{
	background-position-y:calc(-36px * 10);
}
.icon-skill[data-icon-type="status-time"]
{
	background-position-y:calc(-36px * 11);
}
.icon-skill.time-incr[data-icon-type="status-time"]
{
	background-position-x:calc(-36px * 1);
}
.icon-skill[data-icon-type="auto-heal"]
{
	background-position-y:calc(-36px * 12);
}
.icon-skill[data-icon-type="ctw"],
.icon-skill[data-icon-type="ctw"]::after,
.icon-skill[data-icon-type="ctw"]::before
{
	background-position-y:calc(-36px * 13);
}
.icon-skill[data-icon-type="ctw"]::before
{
	animation: rotate-animate 1s infinite linear;
	background-position-x:calc(-36px * 1);
}
.icon-skill[data-icon-type="ctw"]::after
{
	animation: rotate-animate 6s infinite linear;
	background-position-x:calc(-36px * 2);
}
.icon-skill[data-icon-type="gravity"]
{
	animation: gravity-animate 1s infinite;
	transform-origin: bottom center;
	background-position-y:calc(-36px * 14);
}
.icon-skill[data-icon-type="resolve"]
{
	background-position-y:calc(-36px * 15);
}
.icon-skill[data-icon-type="unbind-normal"]
{
	background-position-y:calc(-36px * 16);
}
.icon-skill[data-icon-type="unbind-awakenings"]
{
	background-position-y:calc(-36px * 17);
}
.icon-skill[data-icon-type="unbind-matches"]
{
	background-position-y:calc(-36px * 18);
}
.icon-skill[data-icon-type="skill-boost"],
.icon-skill.boost-incr::after,
.icon-skill.boost-decr::after,
.icon-skill[data-icon-type="bind-skill"]
{
	background-position-y:calc(-36px * 19);
}
.icon-skill.boost-incr::after
{
	background-position-x:calc(-36px * 1);
}
.icon-skill.boost-decr::after
{
	background-position-x:calc(-36px * 2);
}
.icon-skill[data-icon-type="add-combo"]
{
	background-position-y:calc(-36px * 20);
}
.icon-skill[data-icon-type="add-combo"]::after
{
	color: white;
	text-shadow: black 1px 1px 0,black -1px 0px 0,black 0 0 1px;
	font-family: var(--game-font-family);
	font-size: 15px;
	top: 0;
	left: 20px;
	content: attr(data-add-combo);
}
.icon-skill[data-icon-type="fixed-time"]
{
	background-position-y:calc(-36px * 11);
	background-position-x:calc(-36px * 1);
}
.icon-skill[data-icon-type="fixed-time"]::after
{
	background-position-y:calc(-36px * 11);
	background-position-x:calc(-36px * 2);
	transform: scale(0.75);
	left: 10px;
	top: 5px;
}
.icon-skill[data-icon-type="board-size-change"]
{
	background-position-y:calc(-36px * 21);
}
.icon-skill[data-icon-type="counter-attack"]
{
	background-position-y:calc(-36px * 22);
}
.icon-skill[data-icon-type="orb-drop-incr"]
{
	background-position-y:calc(-36px * 23);
}
.icon-skill[data-icon-type="attr-absorb"]
{
	background-position-y:calc(-36px * 24);
}
.icon-skill[data-icon-type="combo-absorb"]
{
	background-position-y:calc(-36px * 25);
}
.icon-skill[data-icon-type="damage-absorb"]
{
	background-position-y:calc(-36px * 26);
}
.icon-skill[data-icon-type="damage-void"]
{
	background-position-y:calc(-36px * 27);
}
.icon-skill[data-icon-type="orb-unlocked"]
{
	background-position-y:calc(-36px * 28);
}
.icon-skill[data-icon-type="rate-mul-drop"]
{
	background-position-y:calc(-36px * 29);
}
.icon-skill[data-icon-type="rate-mul-coin"]
{
	background-position-y:calc(-36px * 30);
}
.icon-skill[data-icon-type="rate-mul-exp"]
{
	background-position-y:calc(-36px * 31);
}
.icon-skill[data-icon-type="reduce-damage"]
{
	background-position-y:calc(-36px * 32);
}
.icon-skill[data-icon-type="orb-locked"]
{
	background-position-y:calc(-36px * 11);
	background-position-x:calc(-36px * 2);
}
.icon-skill[data-icon-type="orb-enhanced"]
{
	background-position-y:calc(-36px * 33);
}
.icon-skill[data-icon-type="board-roulette"]
{
	background-position-y:calc(-36px * 34);
}
.icon-skill[data-icon-type="board-clouds"]
{
	background-position: center;
	background-size: contain;
	background-image: url(images/icon-cloud-1.png);
}
.icon-skill[data-icon-type="board-immobility"]
{
	background-position: center;
	background-size: cover;
	background-image: url(images/icon-immobility.png);
}
.icon-skill[data-icon-type="orb-nail"]
{
	background-position-y:calc(-36px * 35);
}
.icon-skill[data-icon-type="evolved-skill-loop"]
{
	background-image: url(images/icon-evolved-skill-loop.png);
	background-size: contain;
}
.icon-skill[data-icon-type="increase-damage-cap"]
{
	background-position-y:calc(-36px * 36);
}
.icon-skill[data-icon-type="increase-damage-cap"]
{
	background-position-y:calc(-36px * 36);
}

:where(:lang(en), :lang(ko)) .icon-skill:where(
	[data-icon-type="mass-attack"],
	[data-icon-type="unbind-awakenings"],
	[data-icon-type="reduce-damage"],
	[data-icon-type="damage-absorb"],
	[data-icon-type="damage-void"],
){
	background-position-x: -36px;
}
:lang(en) .icon-skill[data-icon-type="resolve"] {
	background-position-x: calc(-36px * 1);
}
:lang(ko) .icon-skill[data-icon-type="resolve"] {
	background-position-x: calc(-36px * 2);
}