main { background-color: #777; }

/*
#role_Delhi_Sultanate { background-color: #43454b }
#role_Bahmani_Kingdom { background-color: #30b58b }
#role_Vijayanagara_Empire { background-color: #ffbf32 }
*/

#role_Delhi_Sultanate { background-color: hsl(75, 5%, 65%) }
#role_Bahmani_Kingdom { background-color: hsl(160, 60%, 70%) }
#role_Vijayanagara_Empire { background-color: hsl(40, 100%, 70%) }

header.your_turn.ds { background-color: hsl(75, 5%, 70%) }
header.your_turn.bk { background-color: hsl(160, 60%, 70%) }
header.your_turn.ve { background-color: hsl(40, 100%, 70%) }

#log { background-color: white }
#log .h2.ds { background-color: hsl(75, 5%, 85%) }
#log .h2.bk { background-color: hsl(160, 60%, 85%) }
#log .h2.ve { background-color: hsl(40, 100%, 85%) }
#log .h2.mi { background-color: pink }

#role_Solo {
	background-image: linear-gradient(120deg, #89a, #30b58b, #ffbf32)
}

.role.active span { text-decoration: underline; }

/* LAYOUT */

#card_tip {
	position: fixed;
	z-index: 100;
	right: 240px;
	top: 60px;
}

#card_panel {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	justify-content: start;
	gap: 16px;
	padding: 16px;
}

#table {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr min-content min-content 1fr;
	grid-template-rows: min-content max-content;
}

#mapwrap {
	grid-column: 2;
	grid-row: 2;
}

#card_panel {
	grid-column: 2;
	grid-row: 1;
}

#mapwrap[data-fit="both"] + #card_panel {
	max-width: 250px;
	grid-column: 3;
	grid-row: 2;
}

@media (min-width: 2000px) {
	#card_panel {
		max-width: 250px;
		grid-column: 3;
		grid-row: 2;
	}
}

/* COMBAT TABLE */

.player_pool {
	width: 450px;
	background-color: #0003;
	padding: 8px;
	border-radius: 20px;
	margin: 14px 14px;
}

.player_name {
	color: rgb(31, 27, 23);
	font-size: 20px;
	text-align: center;
	font-family: "Source Serif";
	padding: 4px;
}

.table_pool {
	display: flex;
	justify-content: center;
	height: 36px;
	gap: 12px;
	align-items: center;
	margin: 8px;
}

.die {
	width: 37px;
	height: 37px;
	border-width: 3px;
	border-style: solid;
	background-size: 600% 100%;
	background-repeat: no-repeat;
	background-image: url(images/die_pale_pips.svg);
	box-shadow: 0 0 0 1px #333, 1px 2px 3px 1px #0004;
}

.d0 { display: none; }
.d1 { background-position: 0% 0; }
.d2 { background-position: 20% 0; }
.d3 { background-position: 40% 0; }
.d4 { background-position: 60% 0; }
.d5 { background-position: 80% 0; }
.d6 { background-position: 100% 0; }

.attacker .die {
	background-color: #c98a89;
	border-color: #d8a09f #b67473 #b67473 #d8a09f;
}

.attacker .die.hit {
	background-color: #9e302f;
	border-color: #9c3b3a #701d1b #701d1b #9c3b3a;
	background-image: url(images/die_gold_pips.svg);
}

.defender .die {
	background-color: #d1bdb0;
	border-color: #dbcdc3 #c2aa99 #c2aa99 #dbcdc3;
}

.defender .die.hit {
	background-color: #bb957b;
	border-color: #d6af95 #a18069 #a18069 #d6af95;
	background-image: url(images/die_gold_pips.svg);
}

.die.action { box-shadow: 0 0 0 1px #333, 0 0 0px 3px white; }

.attacker_banner {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
.defender_banner {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}
img.f {
	height: 42px;
}

/* LOG */

#log .indent { padding-left: 24px; }
#log .italic { font-style: italic; }

#log .h1 { font-weight: bold; font-variant: small-caps; color: white; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h1 { text-shadow: 0px 0px 8px black; }
#log .h2 { padding-top: 1px; padding-bottom: 1px; text-align: center; }
#log .h3 { text-decoration: 1px #0006 underline; }

#log .h1 { background-image: linear-gradient(60deg, #463b17, #9c8544, #756437); }
#log .h1.mi { background-image: linear-gradient(60deg, rgb(83, 8, 8), rgb(160, 0, 0), rgb(44, 44, 40)); }
#log .h1.succ1 { background-image: linear-gradient(60deg, rgb(67, 70, 54), rgb(97, 102, 82), rgb(67, 70, 54)); }
#log .h1.succ2 { background-image: linear-gradient(170deg, rgb(15, 76, 69), rgb(0, 132, 121), rgb(3, 99, 95)); }
#log .h1.succ3 { background-image: linear-gradient(240deg, rgb(118, 80, 0), rgb(187, 145, 9), rgb(65, 42, 0)); }

#log img.d { height: 15px; vertical-align: -4px; margin: 0px 1px; }
#log img.c { height: 15px; vertical-align: -3px; margin: 0px 1px;}
#log img.h { height: 17px; vertical-align: -2px; margin: -1px 2px; }

#log img.f { height: 16px; vertical-align: -3px; }
#log img.i { height: 14px; vertical-align: -3px; }
#log img.m { height: 16px; vertical-align: -3px; }

#log .adice {
	font-size: 14px;
	color: #9e302f;
}

#log .ddice {
	font-size: 14px;
	color: #000000;
}

/* MAP */

#mapwrap {
	box-shadow: 0px 1px 10px #0008;
	width: 1275px;
	height: 1650px;
	margin-bottom: 24px;
}

#mapwrap[data-fit="width"], #mapwrap[data-fit="both"] {
	margin-bottom: 0;
}

#map {
	width: 1275px;
	height: 1650px;
	background-repeat: no-repeat;
	background-size: cover;
}

#map { background-image: url("map75.jpg") }
@media (min-resolution: 97dpi) {
	#map { background-image: url("map150.jpg") }
}

#svgmap { position: absolute; }
#tokens { position: absolute; }
#pieces { position: absolute; }
#boxes { position: absolute; }

#map.hide_pieces #pieces { display: none; }
#map.hide_tokens #tokens { display: none; }

/* BATTLE */

#attack_table {
	position: absolute;
	scroll-margin: 20px;
	z-index: 200;
	box-shadow: 0px 5px 10px 0px rgba(0,0,0,0.5);
	border: 1px solid black;
	min-width: 494px;
}

@media (max-width: 494px) {
	#attack_table {
		min-width: 90vw;
		min-width: 90dvw;
	}
}

#attack_header {
	list-style: none;
	cursor: n-resize;
	padding: 2px 8px;
	line-height: 24px;
	min-height: 24px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;

	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-image: url(images/gui_box_maximize.svg);
	background-color: rgba(165, 42, 42, 0.637);
	color: gold;
}

#attack_table[open] {
	background-color: #d6c4a9;
}

#attack_table[open] #attack_header {
	border-bottom: 1px solid black;
	background-image: url(images/gui_box_minimize.svg);
	background-color: brown;
}


/* SPACES */

path { fill: none; stroke-width: 4; }
path.action { fill: yellowgreen; fill-opacity: 0.3; stroke: lightgreen; }
path.mongol.action { fill: gold; fill-opacity: 0.3; stroke: gold; }
path.selected { stroke: yellow; }
path.tip { stroke: white; stroke-dasharray: 4 4; }
path.campaign { stroke: black; stroke-dasharray: 4 4; }

.space {
	position: absolute;
	border-radius: 50%;
	border: 4px solid transparent;
}

.space.box { border-radius:  0%; }

.space.campaign { border-style: dotted; border-color: black; }

.space.action { border-color: lightgreen; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgb(144, 238, 144, 0.3); }
.space.box.action.ds { border-color: rgb(88, 88, 88); box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgba(168, 168, 167, 0.5); }
.space.box.action.bk { border-color: rgb(15, 202, 187); box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgba(17, 219, 199, 0.5); }
.space.box.action.ve { border-color: rgb(226, 207, 31); box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgba(226, 190, 71, 0.5); }
.space.box.action.mi { border-color: rgb(236, 121, 45); box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; background-color: rgb(236, 121, 45, 0.5); }
.space.selected { border-color: yellow; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
.space.tip { border: 4px dotted white; }

.box{position:absolute;box-sizing:border-box;border:4px solid transparent}
.box.action{border-color:lemonchiffon;}
.box.selected{border-color:yellow;}
.box.tip { border-color: white; }

/* PIECES */

.piece {
	position: absolute;
	pointer-events: none;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
	filter: drop-shadow(0 1px 1px #0006);
}
.piece.action {
	pointer-events: auto;
	filter:
		drop-shadow(0 -2px 0 white)
		drop-shadow(0 2px 0 white)
		drop-shadow(-2px 0 0 white)
		drop-shadow(2px 0 0 white)
		;
}
.piece.selected {
	pointer-events: auto;
	filter:
		drop-shadow(0 -2px 0 yellow)
		drop-shadow(0 2px 0 yellow)
		drop-shadow(-2px 0 0 yellow)
		drop-shadow(2px 0 0 yellow)
		;
}

.cylinder { width: 44px; height: 48px; }
.disc { width: 44px; height: 38px; }
.governor, .amir, .raja { width: 29px; height: 36px; }
.cube { width: 29px; height: 36px; }

.ds.cylinder { background-image: url(pieces/ds_cylinder.svg) }
.ds.cylinder.empty { background-image: url(pieces/ds_cylinder_empty.svg) }
.ds.cube { background-image: url(pieces/ds_troop.svg) }
.ds.disc { background-image: url(pieces/ds_disk.svg) }
.ds.governor { background-image: url(pieces/ds_governor.svg) }
.bk.cylinder { background-image: url(pieces/bk_cylinder.svg) }
.bk.cylinder.empty { background-image: url(pieces/bk_cylinder_empty.svg) }
.bk.amir { background-image: url(pieces/bk_amir.svg) }
.bk.amir.rebel { background-image: url(pieces/bk_amir_rebel.svg) }
.bk.disc { background-image: url(pieces/bk_disk.svg) }
.ve.cylinder { background-image: url(pieces/ve_cylinder.svg) }
.ve.cylinder.empty { background-image: url(pieces/ve_cylinder_empty.svg) }
.ve.raja { background-image: url(pieces/ve_raja.svg) }
.ve.raja.rebel { background-image: url(pieces/ve_raja_rebel.svg) }
.ve.disc { background-image: url(pieces/ve_disk.svg) }
.mongol.cube { background-image: url(pieces/mongol_invader.svg) }

.disc { border-radius: 15px; }
.elite { border-radius: 8px; }
.cube { border-radius: 14px 14px / 10px 10px; }

/* TOKENS */

.token {
	pointer-events: none;
	position: absolute;
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
	background-repeat: no-repeat;
	border-radius: 8px;
	border: 2px outset gray;
	box-shadow: 0 0 0px 1px #222;
	background-size: 45px 45px;
	width: 45px;
	height: 45px;
}

.token.action {
	pointer-events: auto;
	box-shadow: 0 0 0 3px white;
}

.token.tributary, .token.ds_ctl, .token.bk_ctl, .token.ve_ctl { border-radius: 50% }

/* CARDS */

.card {
	width: 250px;
	height: 350px;
	border-radius: 10px;
	background-color: #c6bb8d;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008;
}

#discard_pile {
	display: flex;
	position: relative;
}

#discard_pile .card.side {
	margin-left: -206px;
}

#discard_pile .card.stack {
	margin-top: -305px;
}

.card.card_back {
	background-color: orange;
}

.card.action {
	box-shadow: 0 0 0 3px white;
}

.card.momentum {
	width: 186px;
	height: 261px;
	border-radius: 12px;
}

#deck_outer { position: relative; }
#deck_size {
	position: absolute;
	right: 24px;
	bottom: 16px;
	font-size: 24px;
	font-weight: bold;
	color: white;
}

#of_gods_and_kings { position: relative; }
#of_gods_and_kings_label {
	position: absolute;
	top: 6px;
	left: 6px;
	right: 6px;
	border-radius: 16px;
	text-align: center;
	background-color: #5c4f23;
	font-size: 16px;
	font-weight: bold;
	color: white;
}

#this_card { position: relative; }

#this_card.c .shaded_event { border-top-color: transparent; }
#this_card.c .unshaded_event { border-image: radial-gradient(100px 30px at bottom, transparent 65%, white) 3 }

#of_gods_and_kings.c .shaded_event { border-top-color: transparent; }
#of_gods_and_kings.c .unshaded_event { border-image: radial-gradient(100px 30px at bottom, transparent 65%, white) 3 }


.unshaded_event, .shaded_event {
	display: none;
	position: absolute;
	box-sizing: border-box;
	border: 3px solid white;
}

.shaded_event.action, .unshaded_event.action {
	display: block;
}

.unshaded_event {
	left: 5px;
	right: 5px;
	top: 202px;
	height: 66px;
	border-radius: 10px;
}

.shaded_event {
	left: 4px;
	right: 4px;
	bottom: 3px;
	height: 82px;
	border-radius: 10px;
}

#this_card, #of_gods_and_kings {
	&.card_1 .shaded_event { bottom: 3px; }

	&.card_2 .unshaded_event { height: 64px; top: 204px; left: 20px; right: 20px; }

	&.card_3 .unshaded_event { height: 72px; left: 10px; right: 10px; }
	&.card_3 .shaded_event { height: 76px; }

	&.card_4 .unshaded_event { height: 76px; top: 206px; left: 10px; right: 10px; }
	&.card_4 .shaded_event { height: 68px; }

	&.card_5 .unshaded_event { height: 68px; top: 204px; left: 3px; right: 3px; }
	&.card_5 .shaded_event { height: 78px; }

	&.card_6 .unshaded_event { height: 74px; top: 206px; left: 7px; right: 7px; }
	&.card_6 .shaded_event { height: 70px; }

	&.card_7 .unshaded_event { height: 73px; top: 201px; left: 8px; right: 8px; }
	&.card_7 .shaded_event { height: 75px; }

	&.card_8 .unshaded_event { height: 70px; left: 10px; right: 10px; }
	&.card_8 .shaded_event { height: 78px; right: 3px; left: 3px; }

	&.card_9 .unshaded_event { height: 69px; top: 200px; left: 10px; right: 10px; }
	&.card_9 .shaded_event { height: 80px; bottom: 4px; }

	&.card_10 .unshaded_event { height: 81px; top: 201px; left: 16px; right: 16px; }
	&.card_10 .shaded_event { height: 68px; }

	&.card_11 .unshaded_event { height: 76px; top: 206px; left: 12px; right: 12px; }
	&.card_11 .shaded_event { height: 68px; }

	&.card_12 .unshaded_event { height: 68px; top: 200px; left: 16px; right: 16px; }

	&.card_13 .unshaded_event { height: 68px; top: 200px; left: 10px; right: 10px; }

	&.card_14 .unshaded_event { height: 68px; top: 199px; left: 1px; right: 1px; }
	&.card_14 .shaded_event { bottom: 4px; }

	&.card_15 .unshaded_event { height: 74px; top: 205px; }
	&.card_15 .shaded_event { height: 71px; }

	&.card_16 .unshaded_event { height: 67px; top: 201px; left: 18px; right: 18px; }

	&.card_17 .unshaded_event { height: 70px; top: 204px; left: 16px; right: 16px; }
	&.card_17 .shaded_event { height: 76px; }

	&.card_18 .unshaded_event { height: 76px; top: 206px; }
	&.card_18 .shaded_event { height: 68px; }

	&.card_19 .unshaded_event { height: 74px; }
	&.card_19 .shaded_event { height: 74px; }

	&.card_20 .unshaded_event { height: 72px; }
	&.card_20 .shaded_event { height: 76px; }

	&.card_21 .unshaded_event { height: 78px; top: 204px; left: 12px; right: 12px; }
	&.card_21 .shaded_event { height: 68px; }

	&.card_22 .unshaded_event { height: 70px; top: 204px; left: 2px; right: 2px; }
	&.card_22 .shaded_event { height: 76px; }

	&.card_23 .unshaded_event { height: 82px; top: 200px; left: 8px; right: 8px; }
	&.card_23 .shaded_event { height: 68px; }

	&.card_24 .unshaded_event { height: 75px; top: 206px; left: 3px; right: 3px; }
	&.card_24 .shaded_event { height: 69px; }

	&.card_26 .unshaded_event { height: 145px; left: 1px; right: 1px; }

	&.card_27 .unshaded_event { height: 72px; left: 3px; right: 3px; }
	&.card_27 .shaded_event { height: 76px; }

	&.card_28 .unshaded_event { height: 76px; top: 204px; left: 2px; right: 2px; }
	&.card_28 .shaded_event { height: 70px; left: 2px; right: 2px; }

	&.card_29 .unshaded_event { height: 65px; top: 206px; left: 18px; right: 18px; }
	&.card_29 .shaded_event { height: 80px; bottom: 2px; }

	&.card_31 .unshaded_event { height: 74px; top: 202px; left: 9px; right: 9px; }
	&.card_31 .shaded_event { height: 74px; }

	&.card_32 .unshaded_event { height: 83px; top: 207px; left: 10px; right: 10px; }
	&.card_32 .shaded_event { height: 60px; }

	&.card_33 .unshaded_event { height: 76px; top: 206px; left: 1px; right: 1px; }
	&.card_33 .shaded_event { height: 68px; }

	&.card_34 .unshaded_event { height: 74px; top: 206px; left: 8px; right: 8px; }
	&.card_34 .shaded_event { height: 70px; }

	&.card_35 .unshaded_event { height: 83px; top: 205px; left: 3px; right: 3px; }
	&.card_35 .shaded_event { height: 62px; }

	&.card_36 .unshaded_event { height: 76px; top: 205px; left: 2px; right: 2px; }
	&.card_36 .shaded_event { height: 69px; }
}

/* TOKEN IMAGES */

.token.tributary { background-color: #2a2c26 }
.token.ds_ctl { background-color: #433e1d }
.token.bk_ctl { background-color: #15908a }
.token.ve_ctl { background-color: #fc7b0d }
#token_ds_vp { background-color: #2a2c26 }
#token_bk_vp { background-color: #15908a }
#token_ve_vp { background-color: #fc7b0d }
#token_bk_influence { background-color: #02766f }
#token_ve_influence { background-color: #fdbb47 }
#token_mongol_cavalry { background-color: #58291f }
.token.cavalry.charge { background-color: #6c4a2f }
.token.cavalry.screen { background-color: #363d29 }

.token.tributary { border-color: #2a2c26 }
.token.ds_ctl { border-color: #433e1d }
.token.bk_ctl { border-color: #15908a }
.token.ve_ctl { border-color: #fc7b0d }
#token_ds_vp { border-color: #2a2c26 }
#token_bk_vp { border-color: #15908a }
#token_ve_vp { border-color: #fc7b0d }
#token_bk_influence { border-color: #02766f }
#token_ve_influence { border-color: #fdbb47 }
#token_mongol_cavalry { border-color: #58291f }
.token.cavalry.charge { border-color: #6c4a2f }
.token.cavalry.screen { border-color: #363d29 }

.token.tributary { background-image: url(pieces/Tributary.png) }
.token.ds_ctl { background-image: url(pieces/Flag_DS.png) }
.token.bk_ctl { background-image: url(pieces/Flag_BK.png) }
.token.ve_ctl { background-image: url(pieces/Flag_VE.png) }
#token_ds_vp { background-image: url(pieces/Victory_DS.png) }
#token_bk_vp { background-image: url(pieces/Victory_BK.png) }
#token_ve_vp { background-image: url(pieces/Victory_VE.png) }
#token_bk_influence { background-image: url(pieces/Influence_BK.png) }
#token_ve_influence { background-image: url(pieces/Influence_VE.png) }
#token_mongol_cavalry { background-image: url(pieces/Cavalry_Mongol.png) }
.token.cavalry.charge { background-image: url(pieces/Cavalry_Charge.png) }
.token.cavalry.screen { background-image: url(pieces/Cavalry_Screen.png) }

/* CARD IMAGES */

.card.card_back{background-image:url(cards100/event_back.jpg)}
.card.card_1{background-image:url(cards100/event_1.jpg)}
.card.card_2{background-image:url(cards100/event_2.jpg)}
.card.card_3{background-image:url(cards100/event_3.jpg)}
.card.card_4{background-image:url(cards100/event_4.jpg)}
.card.card_5{background-image:url(cards100/event_5.jpg)}
.card.card_6{background-image:url(cards100/event_6.jpg)}
.card.card_7{background-image:url(cards100/event_7.jpg)}
.card.card_8{background-image:url(cards100/event_8.jpg)}
.card.card_9{background-image:url(cards100/event_9.jpg)}
.card.card_10{background-image:url(cards100/event_10.jpg)}
.card.card_11{background-image:url(cards100/event_11.jpg)}
.card.card_12{background-image:url(cards100/event_12.jpg)}
.card.card_13{background-image:url(cards100/event_13.jpg)}
.card.card_14{background-image:url(cards100/event_14.jpg)}
.card.card_15{background-image:url(cards100/event_15.jpg)}
.card.card_16{background-image:url(cards100/event_16.jpg)}
.card.card_17{background-image:url(cards100/event_17.jpg)}
.card.card_18{background-image:url(cards100/event_18.jpg)}
.card.card_19{background-image:url(cards100/event_19.jpg)}
.card.card_20{background-image:url(cards100/event_20.jpg)}
.card.card_21{background-image:url(cards100/event_21.jpg)}
.card.card_22{background-image:url(cards100/event_22.jpg)}
.card.card_23{background-image:url(cards100/event_23.jpg)}
.card.card_24{background-image:url(cards100/event_24.jpg)}
.card.card_25{background-image:url(cards100/event_25.jpg)}
.card.card_26{background-image:url(cards100/event_26.jpg)}
.card.card_27{background-image:url(cards100/event_27.jpg)}
.card.card_28{background-image:url(cards100/event_28.jpg)}
.card.card_29{background-image:url(cards100/event_29.jpg)}
.card.card_30{background-image:url(cards100/event_30.jpg)}
.card.card_31{background-image:url(cards100/event_31.jpg)}
.card.card_32{background-image:url(cards100/event_32.jpg)}
.card.card_33{background-image:url(cards100/event_33.jpg)}
.card.card_34{background-image:url(cards100/event_34.jpg)}
.card.card_35{background-image:url(cards100/event_35.jpg)}
.card.card_36{background-image:url(cards100/event_36.jpg)}
.card.card_37{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
.card.card_38{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
.card.card_39{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
.card.card_40{background-image:url(cards100/Mongol_Invasion_BK_front.jpg)}
.card.card_41{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
.card.card_42{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
.card.card_43{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
.card.card_44{background-image:url(cards100/Mongol_Invasion_VE_front.jpg)}
.card.card_45{background-image:url(cards100/Succession1_front.jpg)}
.card.card_45_back{background-image:url(cards100/Succession1_back.jpg)}
.card.card_46{background-image:url(cards100/Succession2_front.jpg)}
.card.card_46_back{background-image:url(cards100/Succession2_back.jpg)}
.card.card_47{background-image:url(cards100/Succession3_front.jpg)}
.card.card_47_back{background-image:url(cards100/Succession3_back.jpg)}
.card.card_48{background-image:url(cards100/Timurid_Empire_front.jpg)}
.card.card_49{background-image:url(cards100/Timurid_Empire_front.jpg)}
.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_front.jpg)}
.card.card_dynasty_tughlaq{background-image:url(cards100/Dynasty_back.jpg)}

@media (min-resolution: 97dpi) {
.card.card_back{background-image:url(cards200/event_back.jpg)}
.card.card_1{background-image:url(cards200/event_1.jpg)}
.card.card_2{background-image:url(cards200/event_2.jpg)}
.card.card_3{background-image:url(cards200/event_3.jpg)}
.card.card_4{background-image:url(cards200/event_4.jpg)}
.card.card_5{background-image:url(cards200/event_5.jpg)}
.card.card_6{background-image:url(cards200/event_6.jpg)}
.card.card_7{background-image:url(cards200/event_7.jpg)}
.card.card_8{background-image:url(cards200/event_8.jpg)}
.card.card_9{background-image:url(cards200/event_9.jpg)}
.card.card_10{background-image:url(cards200/event_10.jpg)}
.card.card_11{background-image:url(cards200/event_11.jpg)}
.card.card_12{background-image:url(cards200/event_12.jpg)}
.card.card_13{background-image:url(cards200/event_13.jpg)}
.card.card_14{background-image:url(cards200/event_14.jpg)}
.card.card_15{background-image:url(cards200/event_15.jpg)}
.card.card_16{background-image:url(cards200/event_16.jpg)}
.card.card_17{background-image:url(cards200/event_17.jpg)}
.card.card_18{background-image:url(cards200/event_18.jpg)}
.card.card_19{background-image:url(cards200/event_19.jpg)}
.card.card_20{background-image:url(cards200/event_20.jpg)}
.card.card_21{background-image:url(cards200/event_21.jpg)}
.card.card_22{background-image:url(cards200/event_22.jpg)}
.card.card_23{background-image:url(cards200/event_23.jpg)}
.card.card_24{background-image:url(cards200/event_24.jpg)}
.card.card_25{background-image:url(cards200/event_25.jpg)}
.card.card_26{background-image:url(cards200/event_26.jpg)}
.card.card_27{background-image:url(cards200/event_27.jpg)}
.card.card_28{background-image:url(cards200/event_28.jpg)}
.card.card_29{background-image:url(cards200/event_29.jpg)}
.card.card_30{background-image:url(cards200/event_30.jpg)}
.card.card_31{background-image:url(cards200/event_31.jpg)}
.card.card_32{background-image:url(cards200/event_32.jpg)}
.card.card_33{background-image:url(cards200/event_33.jpg)}
.card.card_34{background-image:url(cards200/event_34.jpg)}
.card.card_35{background-image:url(cards200/event_35.jpg)}
.card.card_36{background-image:url(cards200/event_36.jpg)}
.card.card_37{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
.card.card_38{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
.card.card_39{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
.card.card_40{background-image:url(cards200/Mongol_Invasion_BK_front.jpg)}
.card.card_41{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
.card.card_42{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
.card.card_43{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
.card.card_44{background-image:url(cards200/Mongol_Invasion_VE_front.jpg)}
.card.card_45{background-image:url(cards200/Succession1_front.jpg)}
.card.card_45_back{background-image:url(cards200/Succession1_back.jpg)}
.card.card_46{background-image:url(cards200/Succession2_front.jpg)}
.card.card_46_back{background-image:url(cards200/Succession2_back.jpg)}
.card.card_47{background-image:url(cards200/Succession3_front.jpg)}
.card.card_47_back{background-image:url(cards200/Succession3_back.jpg)}
.card.card_48{background-image:url(cards200/Timurid_Empire_front.jpg)}
.card.card_49{background-image:url(cards200/Timurid_Empire_front.jpg)}
.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_front.jpg)}
.card.card_dynasty_tughlaq{background-image:url(cards200/Dynasty_back.jpg)}
}