main { background-color: #777; }

#role_DS { background-color: silver }
#role_BK { background-color: turquoise }
#role_VK { background-color: gold }
#role_Solo { background-image: linear-gradient(120deg, gray, turquoise, gold) }

.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: center;
	gap: 16px;
	padding: 16px;
}

@media (max-width: 800px) {
	#card_panel {
		justify-content: start;
	}
}

#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: 1;
}

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

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

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

/* LOG */
#log .h1 { background-color: silver; font-weight: bold; padding-top:4px; padding-bottom:4px; margin: 8px 0; text-align: center; }
#log .h1 { background-image: linear-gradient(60deg, gray, turquoise, gold); text-shadow: 0 0 4px white; }
#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }

#log .h2.ds { background-color: silver  }
#log .h2.bk { background-color: #85dbd2 }
#log .h2.ve { background-color: #e4ba6e }
#log .h2.mi { background-color: #ebc9be }

#log { font-variant-numeric: tabular-nums; }

/* 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; }

/* 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; }

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

.space.action { border-color: lightgreen; box-shadow: 0 0 2px 1px black, inset 0 0 2px 1px black; }
.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.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.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.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: 16px;
	background-color: #c6bb8d;
	background-size: cover;
	background-repeat: no-repeat;
	box-shadow: 0 0 0 1px #223f21, 1px 1px 4px #0008;
}

.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 }

#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: 3px;
	right: 3px;
	top: 200px;
	height: 70px;
	border-radius: 12px;
}

#shaded_event {
	left: 3px;
	right: 3px;
	bottom: 4px;
	height: 80px;
	border-radius: 12px;
}

/* 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_BK_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/Mongol_Invasion_VE_front.jpg)}
.card.card_46{background-image:url(cards100/Timurid_Empire_front.jpg)}
.card.card_47{background-image:url(cards100/Timurid_Empire_front.jpg)}
.card.card_48{background-image:url(cards100/Succession1_front.jpg)}
.card.card_49{background-image:url(cards100/Succession2_front.jpg)}
.card.card_50{background-image:url(cards100/Succession3_front.jpg)}
.card.card_dynasty_khalji{background-image:url(cards100/Dynasty_front.jpg)}
.card.card_dynasty_khalji{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_BK_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/Mongol_Invasion_VE_front.jpg)}
.card.card_46{background-image:url(cards200/Timurid_Empire_front.jpg)}
.card.card_47{background-image:url(cards200/Timurid_Empire_front.jpg)}
.card.card_48{background-image:url(cards200/Succession1_front.jpg)}
.card.card_49{background-image:url(cards200/Succession2_front.jpg)}
.card.card_50{background-image:url(cards200/Succession3_front.jpg)}
.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_front.jpg)}
.card.card_dynasty_khalji{background-image:url(cards200/Dynasty_back.jpg)}
}