1 files changed, 154 insertions, 0 deletions
diff --git a/cards.css b/cards.css
new file mode 100644
index 0000000..a670221
--- /dev/null
+++ b/cards.css
@@ -0,0 +1,154 @@
+.card {
+	position: relative;
+	grid-template-rows: min-content min-content 1fr min-content min-content;
+	font-family: "Source Serif";
+	font-size: 14px;
+	line-height: 18px;
+	width: 250px;
+	height: 350px;
+	background-color: #ca8;
+	color: black;
+	border: 1px solid black;
+	border-radius: 12px;
+	box-shadow: 1px 2px 8px #0008;
+}
+
+.formation {
+	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;
+}
+
+.formation.red { background-color: #e32223; color: white; }
+.formation.pink { background-color: #f49899; color: black; }
+.formation.blue { background-color: #2482e4; color: white; }
+.formation.dkblue { background-color: #44d; color: white; }
+
+.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: 4px;
+	font-size: 24px;
+	line-height: 24px;
+	padding: 0 12px;
+}
+
+.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;
+}
+
+.flavor {
+	font-family: "Source Serif SmText";
+	margin: 12px 0;
+	padding: 0 12px;
+	font-size: 11px;
+	line-height: 14px;
+}
+
+.reserve {
+	position: absolute;
+	font-size: 12px;
+	line-height: 12px;
+	bottom: 0px;
+	left: 0px;
+	padding: 8px;
+	width: 234px;
+	text-align: center;
+}
+
+.card_number {
+	position: absolute;
+	font-size: 10px;
+	line-height: 12px;
+	bottom: 0px;
+	right: 0px;
+	padding: 8px 8px;
+	opacity: 50%;
+}
+
+.wing_name {
+	position: absolute;
+	font-size: 10px;
+	line-height: 12px;
+	bottom: 0px;
+	left: 0px;
+	padding: 8px 8px;
+	opacity: 50%;
+}