.card {
	position: relative;
	font-family: "Source Serif";
	font-size: 14px;
	line-height: 18px;
	width: 240px;
	height: 336px;
	background-color: #ca8;
	color: black;
	border: 1px solid black;
	border-radius: 12px;
	box-shadow: 1px 2px 8px #0008;
}

.card {
	user-select: none;
}

/* FORMATION CARD */

.name {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	margin: 12px 0;
	padding: 6px 30px 6px 0;
	text-align: center;
	font-size: 16px;
	line-height: 16px;
}

.name.red { background-color: #e32223; color: white; }
.name.pink { background-color: #f49899; color: black; }
.name.blue { background-color: #2482e4; color: white; }
.name.dkblue { background-color: #44d; color: white; }

.name.sym {
	padding-left: 30px;
}

.symbol {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 45px;
	height: 63px;
	background-size: contain;
}

.link {
	position: absolute;
	width: 32px;
	height: 16px;
	top: 58px;
	background-size: contain;
}

.link.left {
	background-image: url(link_left.svg);
	left: 0px;
}

.link.right {
	background-image: url(link_right.svg);
	right: 0px;
}

.symbol.infantry1 { background-image: url(infantry1.png); }
.symbol.infantry2 { background-image: url(infantry2.png); }
.symbol.cavalry1 { background-image: url(cavalry1.png); }
.symbol.cavalry2 { background-image: url(cavalry2.png); }

.strength {
	position: absolute;
	top: 6px;
	right: 4px;
	background-color: #dadada;
	color: black;
	border: 2px solid black;
	border-width: 4px 1px;
	border-radius: 50%;
	min-width: 18px;
	padding: 0 2px;
	height: 32px;
	line-height: 32px;
	font-size: 18px;
	text-align: center;
}

.dice_area {
	position: relative;
	font-size: 24px;
	line-height: 24px;
	text-align: center;
	margin: 12px 0;
}

.dice_area::before { content: " ~ " }
.dice_area::after { content: " ~ " }

.dice_area .star {
	position: absolute;
	right: 0px;
	top: 0px;
	font-size: 24px;
	line-height: 24px;
	padding: 0 12px;
}

.link.right + .dice_area .star {
	right: 24px;
}

.action_row {
	font-style: italic;
	display: grid;
	margin: 12px 0;
	padding: 0 8px;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.action_row > div {
	border: 1px solid black;
	padding: 2px 4px;
}

.action_target:empty {
	visibility: hidden;
}

.action_effect:empty {
	visibility: hidden;
}

.action_type {
	background-color: #e0855d;
	min-height: 18px;
}
.action_type.reaction {
	background-color: #d06aa1;
}
.action_requirement {
	background-color: #daad5d;
	text-align: center;
}
.action_target {
	grid-column: 1 / 3;
	background-color: #daad5d;
	min-height: 18px;
	text-align: center;
}
.action_effect {
	grid-column: 1 / 3;
	background-color: #e3d3c3;
	min-height: 36px;
}

.action_effect:empty {
	min-height: 18px;
}

.lore_text, .rule_text {
	font-family: "Source Serif SmText";
	margin: 6px 0;
	padding: 0 12px;
	font-size: 11px;
	line-height: 13px;
	text-indent: 12px;
}

.lore_text {
	font-style: italic;
}

.lore_text p,
.rule_text p {
	margin: 6px 0;
}

.reserve {
	position: absolute;
	font-size: 12px;
	line-height: 12px;
	bottom: 0px;
	left: 0px;
	padding: 8px 0;
	width: 240px;
	text-align: center;
}

.retire {
	position: absolute;
	font-size: 12px;
	line-height: 12px;
	bottom: 6px;
	left: 60px;
	padding: 2px 0;
	width: 120px;
	text-align: center;
	border-radius: 7px;
}

.number {
	position: absolute;
	font-size: 10px;
	line-height: 12px;
	bottom: 0px;
	right: 0px;
	padding: 8px 8px;
	opacity: 50%;
}

.extra {
	display: none;
	position: absolute;
	font-size: 10px;
	line-height: 12px;
	bottom: 0px;
	left: 0px;
	padding: 8px 8px;
	opacity: 50%;
}

/* SCENARIO CARD */

.scenario_title, .scenario_player {
	background-color: #f5e0c5;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
}

.battle_name { font-size: 16px; line-height: 20px; }
.battle_date { font-size: 10px; line-height: 14px; }

.scenario_title {
	margin: 12px 0;
	padding: 4px 0;
	text-align: center;
}

.scenario_player {
	margin: 6px 0;
	padding: 4px 8px;
}

.battle_name,
.scenario_player_name {
	font-variant: small-caps;
}

.scenario_line { padding-left: 24px; }