body { background-color: dimgray; }
#roles { background-color: gray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#turn_info { background-color: gainsboro; }
.role_vp { float: right; }

:root {
	--box-shadow: 1px 2px 3px 1px #0004;
	--drop-shadow: 1px 2px 1.5px #0004;
}

.checked::before { content: "\2714  " }
.unchecked::before { content: "\2714  "; color:transparent; }

body.Observer #hand_panel, body.Observer #draw_panel, body.Observer #discard_panel {
	display: none;
}

#role_Red { background-color: hsl(354,85%,67%) }
#role_Blue { background-color: hsl(207,67%,78%) }
#role_Yellow { background-color: hsl(47,100%,73%) }
#role_Green { background-color: hsl(99,36%,60%) }

body.Red .your_turn { background-color: hsl(354,85%,72%) }
body.Blue .your_turn { background-color: hsl(207,67%,83%) }
body.Yellow .your_turn { background-color: hsl(47,100%,78%) }
body.Green .your_turn { background-color: hsl(99,36%,65%) }

#log .h1.R { background-color: hsl(354,85%,77%) }
#log .h1.B { background-color: hsl(207,67%,83%) }
#log .h1.Y { background-color: hsl(47,100%,78%) }
#log .h1.G { background-color: hsl(99,36%,70%) }

#log span.M { color: hsl(358, 78%, 41%) }
#log span.S { color: hsl(206, 100%, 30%) }
#log span.P { color: hsl(44, 100%, 32%) }

#log .tip { cursor: default }
#log .tip:hover { text-decoration: underline; }

#log { background-color: whitesmoke; }
#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; }
#log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }

#log .group { margin: 0 8px }

#log .h2.group.military { background-color: hsl(358,20%,80%) }
#log .h3.group.military { background-color: hsl(358,20%,85%) }
#log .group.military { background-color: hsl(358,20%,90%) }
#log .h2.group.senate { background-color: hsl(206,30%,85%) }
#log .group.senate { background-color: hsl(206,30%,90%) }
#log .h2.group.populace { background-color: hsl(44,40%,82%) }
#log .group.populace { background-color: hsl(44,40%,87%) }

#log .white, #log .black {
	display: inline-block;
	vertical-align: -2px;
	width: 12px;
	height: 12px;
	border-radius: 0px;
	box-shadow: none;
	border: none;
	background-size: 600% 100%;
	background-repeat: no-repeat;
}

#log .white {
	background-image: url(images/die_black_pips.svg);
	background-color: #fff;
	border: 1px solid #444;
}

#log .black {
	background-image: url(images/die_white_pips.svg);
	background-color: #666;
	border: 1px solid #222;
}

.action {
	cursor: pointer;
}

@media (max-width: 800px) {
	#panel_list {
		min-width: 2550px;
	}
}

#mapwrap {
	width: 2550px;
	height: 1740px;
	margin-bottom: 30px;
}

#map {
	position: absolute;
	width: 2550px;
	height: 1740px;
}

#board {
	position: absolute;
	width: 2550px;
	height: 1650px;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url(map75.jpg);
	background-color: #e8d792;
	box-shadow: 0px 1px 10px #0008;
}

#crisis_table {
	display: none;
	position: absolute;
	width: 262px;
	height: 356px;
	top: 159px;
	right: 93px;
}

body.p2 #crisis_table {
	display: block;
	background-image: url(overlay_2p_75.jpg);
}

body.p3 #crisis_table {
	display: block;
	background-image: url(overlay_3p_75.jpg);
}

#active_event {
	position: absolute;
	display: block;
	width: 250px;
	height: 350px;
	bottom: 150px;
	left: 50px;
}

svg {
	position: absolute;
}

svg .region, svg .sea {
	fill: transparent;
	stroke: transparent;
	stroke-width: 4px;
}

svg .region.action, svg .sea.action {
	fill: black;
	fill-opacity: 0.3;
}

svg .region.selected {
	fill-opacity: 0.3;
	stroke-dasharray: 8 4;
}

body.military svg .region.action {
	fill: hsl(358, 78%, 51%);
}

body.senate svg .region.action {
	fill: hsl(206, 100%, 35%);
}

body.populace svg .region.action {
	fill: hsl(44, 80%, 52%);
}

body.military svg .region.selected {
	fill: hsl(358, 78%, 51%);
	stroke: hsl(358, 78%, 51%);
}

body.senate svg .region.selected {
	fill: hsl(206, 100%, 35%);
	fill-opacity: 0.3;
	stroke: hsl(206, 100%, 35%);
}

body.populace svg .region.selected {
	fill: hsl(44, 80%, 52%);
	fill-opacity: 0.3;
	stroke: hsl(44, 80%, 52%);
}

body svg .sea.action {
	fill: hsl(206, 100%, 35%);
	fill-opacity: 0.25;
}

#pieces div {
	position: absolute;
	transition-property: top, left, transform;
	transition-duration: 250ms;
	transition-timing-function: ease;
}

.support {
	box-sizing: border-box;
	width: 54px;
	height: 54px;
	border: 4px solid transparent;
	border-radius: 8px;
	z-index: 0;
	display: none;
}

.support.action {
	background-color: hsla(44, 80%, 52%, 0.4);
	border-color: white;
	display: block;
}

.dice {
	width: 36px;
	height: 36px;
	border-radius: 6px;
	border-width: 2px;
	border-style: solid;
	background-size: 600% 100%;
	background-repeat: no-repeat;
}

.d0 { background-position: -100% 0 }
.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; }

.dice.black {
	background-image: url(images/die_white_pips.svg);
	background-color: #444;
}

.dice.white {
	background-image: url(images/die_black_pips.svg);
	background-color: #eee;
}

.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, var(--box-shadow); }
.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, var(--box-shadow); }

/* MAGIC TRACKS */

.governor.s1 { transform: translateX(52px) }
.governor.s2 { transform: translateX(104px) }
.governor.s3 { transform: translateX(156px) }
.governor.s4 { transform: translateX(208px) }
.governor.s5 { transform: translate(26px, 52px) }
.governor.s6 { transform: translate(78px, 52px) }
.governor.s7 { transform: translate(129px, 52px) }
.governor.s8 { transform: translate(181px, 52px) }

.capital {
	display: none;
	box-sizing: border-box;
	width: 72px;
	height: 72px;
}

.capital.action {
	display: block;
	border: 5px solid white;
	box-shadow: 0 0 6px white, inset 0 0 6px black;
}

body.p3 #npg_hispania { display: block }
body.p3 #npg_africa { display: block }
body.p3 #npg_aegyptus { display: block }

body.p2 #npg_britannia { display: block }
body.p2 #npg_hispania { display: block }
body.p2 #npg_africa { display: block }
body.p2 #npg_aegyptus { display: block }
body.p2 #npg_syria { display: block }
body.p2 #npg_galatia { display: block }

/* COUNTERS */

.improvement { background-color: #efebea; }
.red { background-color: #ed1b2f; }
.blue { background-color: #a0caec; }
.yellow { background-color: #ffe175; }
.green { background-color: #80b563; }
.alamanni { background-color: #c3bc8e; }
.franks { background-color: #9cb4be; }
.goths { background-color: #3a9cd6; }
.nomads { background-color: #f99d1c; }
.sassanids { background-color: #8e5ca6; }
.rival_emperor { background-color: #b8b996; }
.militia, .legion { background-color: #ffffff; }
.neutral { background-color: #e3dedc; }
.no_place_governor { background-color: #6e6e6e; }

/* :r !node tools/gencolors.js */
.improvement { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, var(--box-shadow); }
.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, var(--box-shadow); }
.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, var(--box-shadow); }
.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, var(--box-shadow); }
.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, var(--box-shadow); }
.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, var(--box-shadow); }
.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, var(--box-shadow); }
.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, var(--box-shadow); }
.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, var(--box-shadow); }
.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, var(--box-shadow); }
.rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, var(--box-shadow); }
.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, var(--box-shadow); }
.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); }
.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); }
.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, var(--box-shadow); }

.red.action { box-shadow: 0 0 0 1px #680000, 0 0 0 4px white; }
.blue.action { box-shadow: 0 0 0 1px #113854, 0 0 0 4px white; }
.yellow.action { box-shadow: 0 0 0 1px #553a00, 0 0 0 4px white; }
.green.action { box-shadow: 0 0 0 1px #033600, 0 0 0 4px white; }
.legion.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white !important; }
.militia.action { box-shadow: 0 0 0 1px #434343, 0 0 0 4px white !important; }

.alamanni.action { box-shadow: 0 0 0 1px #393204, 0 0 0 4px white; }
.franks.action { box-shadow: 0 0 0 1px #1d323a, 0 0 0 4px white; }
.goths.action { box-shadow: 0 0 0 1px #002759, 0 0 0 4px white; }
.nomads.action { box-shadow: 0 0 0 1px #610700, 0 0 0 4px white; }
.sassanids.action { box-shadow: 0 0 0 1px #2f0042, 0 0 0 4px white; }
.rival_emperor.action { box-shadow: 0 0 0 1px #323214, 0 0 0 4px white; }

.red.selected { box-shadow: 0 0 0 1px #680000, 0 0 0 4px yellow; }
.blue.selected { box-shadow: 0 0 0 1px #113854, 0 0 0 4px yellow; }
.yellow.selected { box-shadow: 0 0 0 1px #553a00, 0 0 0 4px yellow; }
.green.selected { box-shadow: 0 0 0 1px #033600, 0 0 0 4px yellow; }
body.tint .militia.selected,
.militia.selected { box-shadow: 0 0 0 1px #434343, 0 0 0 4px yellow; }

#legion_0 { background-position: 0px 0px }
#legion_1 { background-position: -55px 0px }
#legion_2 { background-position: -110px 0px }
#legion_3 { background-position: -165px 0px }
#legion_4 { background-position: -220px 0px }
#legion_5 { background-position: -275px 0px }
#legion_6 { background-position: -330px 0px }
#legion_7 { background-position: -385px 0px }
#legion_8 { background-position: -440px 0px }
#legion_9 { background-position: 0px -55px }
#legion_10 { background-position: -55px -55px }
#legion_11 { background-position: -110px -55px }
#legion_12 { background-position: -165px -55px }
#legion_13 { background-position: -220px -55px }
#legion_14 { background-position: -275px -55px }
#legion_15 { background-position: -330px -55px }
#legion_16 { background-position: -385px -55px }
#legion_17 { background-position: -440px -55px }
#legion_18 { background-position: 0px -110px }
#legion_19 { background-position: -55px -110px }
#legion_20 { background-position: -110px -110px }
#legion_21 { background-position: -165px -110px }
#legion_22 { background-position: -220px -110px }
#legion_23 { background-position: -275px -110px }
#legion_24 { background-position: -330px -110px }
#legion_25 { background-position: -385px -110px }
#legion_26 { background-position: -440px -110px }
#legion_27 { background-position: 0px -165px }
#legion_28 { background-position: -55px -165px }
#legion_29 { background-position: -110px -165px }
#legion_30 { background-position: -165px -165px }
#legion_31 { background-position: -220px -165px }
#legion_32 { background-position: -275px -165px }

.improvement {
	width: 92px;
	height: 46px;
	background-size: 92px 46px;
	border-radius: 8px;
	border-width: 2px;
	border-style: solid;
}

.militia, .legion,
.alamanni, .franks, .goths, .nomads, .sassanids, .rival_emperor,
.general, .emperor_turns, .no_place_governor {
	width: 55px;
	height: 55px;
	background-size: 55px 55px;
	background-repeat: no-repeat;
	border-radius: 8px;
	border-width: 2px;
	border-style: solid;
}

.general.unavailable { background-size: 330px 55px }
.general.unavailable.n1 { background-position: -55px 0 }
.general.unavailable.n2 { background-position: -110px 0 }
.general.unavailable.n3 { background-position: -165px 0 }
.general.unavailable.n4 { background-position: -220px 0 }
.general.unavailable.n5 { background-position: -275px 0 }

.no_place_governor {
	display: none;
	margin: 4px 0 0 4px;
	width: 58px;
	height: 58px;
	background-position: center;
	border-radius: 0;
}

.governor, .legacy, .legacy_40, .legacy_80 {
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
}

.governor { z-index: 1 }

.governor.unavailable { background-size: 300px 50px }
.governor.unavailable.n1 { background-position: -50px 0 }
.governor.unavailable.n2 { background-position: -100px 0 }
.governor.unavailable.n3 { background-position: -150px 0 }
.governor.unavailable.n4 { background-position: -200px 0 }
.governor.unavailable.n5 { background-position: -250px 0 }

.castra, .quaestor, .mob, .mob_x2, .seat_of_power, .breakaway {
	pointer-events: none;
	width: 54px;
	height: 64px;
	background-size: 54px 64px;
	background-color: transparent;
	box-shadow: none;
	filter: drop-shadow(var(--drop-shadow));
}

.quaestor.pretender {
	transform: translate(27px, -27px);
}

.legion {
	background-size: 900% 400%;
}


.no_place_governor { background-image: url(images/no_place_governor.png) }
.legion { background-image: url(images/legion_full.png) }
.legion.reduced { background-image: url(images/legion_reduced.png) }
.amphitheater { background-image: url(images/improvement_amphitheater.png) }
.basilica { background-image: url(images/improvement_basilica.png) }
.limes { background-image: url(images/improvement_limes.png) }
.market { background-image: url(images/improvement_market.png) }
.monument { background-image: url(images/improvement_monument.png) }
.port { background-image: url(images/improvement_port.png) }
.temple { background-image: url(images/improvement_temple.png) }
.militia { background-image: url(images/militia.png) }
.alamanni { background-image: url(images/alamanni_active.png) }
.franks { background-image: url(images/franks_active.png) }
.goths { background-image: url(images/goths_active.png) }
.nomads { background-image: url(images/nomads_active.png) }
.sassanids { background-image: url(images/sassanids_active.png) }
.alamanni.inactive { background-image: url(images/alamanni_inactive.png) }
.franks.inactive { background-image: url(images/franks_inactive.png) }
.goths.inactive { background-image: url(images/goths_inactive.png) }
.nomads.inactive { background-image: url(images/nomads_inactive.png) }
.sassanids.inactive { background-image: url(images/sassanids_inactive.png) }
.neutral.governor { background-image: url(images/neutral_governor.png) }

.ardashir { background-image: url(images/ardashir.png) }
.cniva { background-image: url(images/cniva.png) }
.shapur { background-image: url(images/shapur.png) }
.ardashir.inactive { background-image: url(images/shapur_back.png) }
.cniva.inactive { background-image: url(images/cniva_back.png) }
.shapur.inactive { background-image: url(images/shapur_back.png) }
.postumus { background-image: url(images/rival_postumus.png) }
.priest_king { background-image: url(images/rival_priest_king.png) }
.zenobia { background-image: url(images/rival_zenobia.png) }

body.shift .ardashir { background-image: url(images/shapur_back.png) }
body.shift .cniva { background-image: url(images/cniva_back.png) }
body.shift .shapur { background-image: url(images/shapur_back.png) }
body.shift .postumus { background-image: url(images/rival_back.png) }
body.shift .priest_king { background-image: url(images/rival_back.png) }
body.shift .zenobia { background-image: url(images/rival_back.png) }

body.shift .ardashir.inactive { background-image: url(images/ardashir.png) }
body.shift .cniva.inactive { background-image: url(images/cniva.png) }
body.shift .shapur.inactive { background-image: url(images/shapur.png) }

.blue.governor { background-image: url(images/blue_governor.png) }
.green.governor { background-image: url(images/green_governor.png) }
.red.governor { background-image: url(images/red_governor.png) }
.yellow.governor { background-image: url(images/yellow_governor.png) }
.blue.legacy { background-image: url(images/blue_legacy.png) }
.green.legacy { background-image: url(images/green_legacy.png) }
.red.legacy { background-image: url(images/red_legacy.png) }
.yellow.legacy { background-image: url(images/yellow_legacy.png) }
.blue.legacy_40 { background-image: url(images/blue_legacy_40.png) }
.green.legacy_40 { background-image: url(images/green_legacy_40.png) }
.red.legacy_40 { background-image: url(images/red_legacy_40.png) }
.yellow.legacy_40 { background-image: url(images/yellow_legacy_40.png) }
.blue.legacy_80 { background-image: url(images/blue_legacy_80.png) }
.green.legacy_80 { background-image: url(images/green_legacy_80.png) }
.red.legacy_80 { background-image: url(images/red_legacy_80.png) }
.yellow.legacy_80 { background-image: url(images/yellow_legacy_80.png) }
.blue.general { background-image: url(images/blue_general.png) }
.green.general { background-image: url(images/green_general.png) }
.red.general { background-image: url(images/red_general.png) }
.yellow.general { background-image: url(images/yellow_general.png) }
.blue.emperor_turns { background-image: url(images/blue_emperor_turns.png) }
.green.emperor_turns { background-image: url(images/green_emperor_turns.png) }
.red.emperor_turns { background-image: url(images/red_emperor_turns.png) }
.yellow.emperor_turns { background-image: url(images/yellow_emperor_turns.png) }
.general.unavailable { background-image: url(images/general_numbers.png) }
.governor.unavailable { background-image: url(images/governor_numbers.png) }

.blue.governor.emperor { background-image: url(images/blue_governor_emperor.png) }
.green.governor.emperor { background-image: url(images/green_governor_emperor.png) }
.red.governor.emperor { background-image: url(images/red_governor_emperor.png) }
.yellow.governor.emperor { background-image: url(images/yellow_governor_emperor.png) }
.blue.general.emperor { background-image: url(images/blue_general_emperor.png) }
.green.general.emperor { background-image: url(images/green_general_emperor.png) }
.red.general.emperor { background-image: url(images/red_general_emperor.png) }
.yellow.general.emperor { background-image: url(images/yellow_general_emperor.png) }

.castra { background-image: url(images/castra.svg) }
.quaestor { background-image: url(images/quaestor.svg) }
.mob { background-image: url(images/mob.svg) }
.mob_x2 { background-image: url(images/mob_x2.svg) }
.blue.seat_of_power { background-image: url(images/blue_seat_of_power.svg) }
.green.seat_of_power { background-image: url(images/green_seat_of_power.svg) }
.red.seat_of_power { background-image: url(images/red_seat_of_power.svg) }
.yellow.seat_of_power { background-image: url(images/yellow_seat_of_power.svg) }
.blue.breakaway { background-image: url(images/blue_breakaway.svg) }
.green.breakaway { background-image: url(images/green_breakaway.svg) }
.red.breakaway { background-image: url(images/red_breakaway.svg) }
.yellow.breakaway { background-image: url(images/yellow_breakaway.svg) }

/* TINTED UNITS */

body.tint .militia {
	background-color: #f3ddbd;
	background-image: url(images/militia_tint.png);
	border-color: #fffcdb #b8a385 #b8a385 #fffcdb;
	box-shadow: 0 0 0 1px #4c3b1f, var(--box-shadow);
}

body.tint .legion.reduced {
	background-color: #f4cccd;
	background-image: url(images/legion_reduced_tint.png);
	border-color: #fff4f5 #ba9596 #ba9596 #fff4f5;
	box-shadow: 0 0 0 1px #503133, var(--box-shadow);
}

/* CARDS */

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

.card {
	width: 250px;
	height: 350px;
	background-size: 250px 350px;
	background-repeat: no-repeat;
	border-radius: 16px;
	box-shadow: 0 0 0 1px #444, var(--box-shadow);
}

.card.event.event_0 { background-color: #b73c26 }
.card.event { background-color: #f1f2f4 }
.card.influence.influence_back { background-color: #5c1d57 }
.card.influence { background-color: #ece8dc }

.card.action {
	box-shadow: 0 0 0px 1px #444, 0 0 0px 4px white;
}

#discard .card.action {
	box-shadow: 0 0 0px 1px #444, 0 0 0px 3px red;
}

#market .card.action {
	box-shadow: 0 0 0px 1px #444, 0 0 0px 3px gold;
}

#played .influence_m1, #played .influence_s1, #played .influence_p1, .card.used {
	filter: brightness(75%)
}

#hand, #draw, #discard {
	min-height: 350px;
}

.card.event_0{background-image:url(cards.1x/event_back.jpg)}
.card.event_1{background-image:url(cards.1x/event_01.jpg)}
.card.event_2{background-image:url(cards.1x/event_02.jpg)}
.card.event_3{background-image:url(cards.1x/event_03.jpg)}
.card.event_4{background-image:url(cards.1x/event_04.jpg)}
.card.event_5{background-image:url(cards.1x/event_05.jpg)}
.card.event_6{background-image:url(cards.1x/event_06.jpg)}
.card.event_7{background-image:url(cards.1x/event_07.jpg)}
.card.event_8{background-image:url(cards.1x/event_08.jpg)}
.card.event_9{background-image:url(cards.1x/event_09.jpg)}
.card.event_10{background-image:url(cards.1x/event_10.jpg)}
.card.event_11{background-image:url(cards.1x/event_11.jpg)}
.card.event_12{background-image:url(cards.1x/event_12.jpg)}
.card.event_13{background-image:url(cards.1x/event_13.jpg)}
.card.event_14{background-image:url(cards.1x/event_14.jpg)}
.card.event_15{background-image:url(cards.1x/event_15.jpg)}
.card.influence_back{background-image:url(cards.1x/influence_back.jpg)}
.card.influence_m1{background-image:url(cards.1x/influence_m1.jpg)}
.card.influence_m2{background-image:url(cards.1x/influence_m2.jpg)}
.card.influence_m3{background-image:url(cards.1x/influence_m3.jpg)}
.card.influence_m4{background-image:url(cards.1x/influence_m4.jpg)}
.card.influence_p1{background-image:url(cards.1x/influence_p1.jpg)}
.card.influence_p2{background-image:url(cards.1x/influence_p2.jpg)}
.card.influence_p3{background-image:url(cards.1x/influence_p3.jpg)}
.card.influence_p4{background-image:url(cards.1x/influence_p4.jpg)}
.card.influence_s1{background-image:url(cards.1x/influence_s1.jpg)}
.card.influence_s2{background-image:url(cards.1x/influence_s2.jpg)}
.card.influence_s3{background-image:url(cards.1x/influence_s3.jpg)}
.card.influence_s3_v2{background-image:url(cards.1x/influence_s3_v2.jpg)}
.card.influence_s4{background-image:url(cards.1x/influence_s4.jpg)}
.card.influence_s4_v2{background-image:url(cards.1x/influence_s4_v2.jpg)}
.card.influence_m2x{background-image:url(cards.1x/influence_m2x.jpg)}
.card.influence_m3x{background-image:url(cards.1x/influence_m3x.jpg)}
.card.influence_m4x{background-image:url(cards.1x/influence_m4x.jpg)}
.card.influence_p2x{background-image:url(cards.1x/influence_p2x.jpg)}
.card.influence_p3x{background-image:url(cards.1x/influence_p3x.jpg)}
.card.influence_p4x{background-image:url(cards.1x/influence_p4x.jpg)}
.card.influence_p4x_v2{background-image:url(cards.1x/influence_p4x_v2.jpg)}
.card.influence_s2x{background-image:url(cards.1x/influence_s2x.jpg)}
.card.influence_s3x{background-image:url(cards.1x/influence_s3x.jpg)}
.card.influence_s4x{background-image:url(cards.1x/influence_s4x.jpg)}

@media (min-resolution:97dpi) {
.card.event_0{background-image:url(cards.2x/event_back.jpg)}
.card.event_1{background-image:url(cards.2x/event_01.jpg)}
.card.event_2{background-image:url(cards.2x/event_02.jpg)}
.card.event_3{background-image:url(cards.2x/event_03.jpg)}
.card.event_4{background-image:url(cards.2x/event_04.jpg)}
.card.event_5{background-image:url(cards.2x/event_05.jpg)}
.card.event_6{background-image:url(cards.2x/event_06.jpg)}
.card.event_7{background-image:url(cards.2x/event_07.jpg)}
.card.event_8{background-image:url(cards.2x/event_08.jpg)}
.card.event_9{background-image:url(cards.2x/event_09.jpg)}
.card.event_10{background-image:url(cards.2x/event_10.jpg)}
.card.event_11{background-image:url(cards.2x/event_11.jpg)}
.card.event_12{background-image:url(cards.2x/event_12.jpg)}
.card.event_13{background-image:url(cards.2x/event_13.jpg)}
.card.event_14{background-image:url(cards.2x/event_14.jpg)}
.card.event_15{background-image:url(cards.2x/event_15.jpg)}
.card.influence_back{background-image:url(cards.2x/influence_back.jpg)}
.card.influence_m1{background-image:url(cards.2x/influence_m1.jpg)}
.card.influence_m2{background-image:url(cards.2x/influence_m2.jpg)}
.card.influence_m3{background-image:url(cards.2x/influence_m3.jpg)}
.card.influence_m4{background-image:url(cards.2x/influence_m4.jpg)}
.card.influence_p1{background-image:url(cards.2x/influence_p1.jpg)}
.card.influence_p2{background-image:url(cards.2x/influence_p2.jpg)}
.card.influence_p3{background-image:url(cards.2x/influence_p3.jpg)}
.card.influence_p4{background-image:url(cards.2x/influence_p4.jpg)}
.card.influence_s1{background-image:url(cards.2x/influence_s1.jpg)}
.card.influence_s2{background-image:url(cards.2x/influence_s2.jpg)}
.card.influence_s3{background-image:url(cards.2x/influence_s3.jpg)}
.card.influence_s3_v2{background-image:url(cards.2x/influence_s3_v2.jpg)}
.card.influence_s4{background-image:url(cards.2x/influence_s4.jpg)}
.card.influence_s4_v2{background-image:url(cards.2x/influence_s4_v2.jpg)}
.card.influence_m2x{background-image:url(cards.2x/influence_m2x.jpg)}
.card.influence_m3x{background-image:url(cards.2x/influence_m3x.jpg)}
.card.influence_m4x{background-image:url(cards.2x/influence_m4x.jpg)}
.card.influence_p2x{background-image:url(cards.2x/influence_p2x.jpg)}
.card.influence_p3x{background-image:url(cards.2x/influence_p3x.jpg)}
.card.influence_p4x{background-image:url(cards.2x/influence_p4x.jpg)}
.card.influence_p4x_v2{background-image:url(cards.2x/influence_p4x_v2.jpg)}
.card.influence_s2x{background-image:url(cards.2x/influence_s2x.jpg)}
.card.influence_s3x{background-image:url(cards.2x/influence_s3x.jpg)}
.card.influence_s4x{background-image:url(cards.2x/influence_s4x.jpg)}
}

/* PANELS */

.panel {
	background-color: #444;
	width: clamp(824px, calc(100% - 30px), 1636px);
	margin: 12px auto 36px auto;
	box-shadow: 1px 2px 6px #0004;
	border: 1px solid #0008;
}

.panel_header {
	color: white;
	font-weight: bold;
	text-align: center;
	padding: 3px 1em;
	border-bottom: 1px solid #0008;
}

.panel_body {
	background-color: #555;
	display: flex;
	justify-content: start;
	flex-wrap: wrap;
	padding: 18px;
	gap: 18px;
	min-height: 350px;
}

#market, #played {
	background-image: repeating-linear-gradient(135deg,
		hsl(0,0%,33%),
		hsl(0,0%,33%) 60px,
		hsl(0,0%,30%) 60px,
		hsl(0,0%,30%) 120px
	)
}

.panel.p_red { background-color: hsl(354,20%,27%) }
.panel.p_blue { background-color: hsl(207,20%,27%) }
.panel.p_yellow { background-color: hsl(47,25%,27%) }
.panel.p_green { background-color: hsl(99,15%,27%) }

.panel.p_red #played {
	background-image: repeating-linear-gradient(135deg,
		hsl(354,20%,33%),
		hsl(354,20%,33%) 60px,
		hsl(354,20%,31%) 60px,
		hsl(354,20%,31%) 120px
	)
}

.panel.p_blue #played {
	background-image: repeating-linear-gradient(135deg,
		hsl(207,20%,33%),
		hsl(207,20%,33%) 60px,
		hsl(207,20%,31%) 60px,
		hsl(207,20%,31%) 120px
	)
}

.panel.p_yellow #played {
	background-image: repeating-linear-gradient(135deg,
		hsl(47,25%,33%),
		hsl(47,25%,33%) 60px,
		hsl(47,25%,31%) 60px,
		hsl(47,25%,31%) 120px
	)
}

.panel.p_green #played {
	background-image: repeating-linear-gradient(135deg,
		hsl(99,15%,33%),
		hsl(99,15%,33%) 60px,
		hsl(99,15%,31%) 60px,
		hsl(99,15%,31%) 120px
	)
}

/* CRISIS TABLE HIGHLIGHT */

#crisis_highlight {
	transition-property: inset, background-color;
	transition-duration: 500ms;
	transition-timing-function: ease;
	box-sizing: border-box;
	position: absolute;
	background-color: transparent;
	border: 4px solid transparent;
	top: 189px;
	left: 2194px;
	width: 263px;
	height: 30px;
	box-shadow: 0 0 0 1px #444;
}

#crisis_highlight.p_red { background-color: hsla(354,85%,67%,20%) }
#crisis_highlight.p_blue { background-color: hsla(207,67%,78%,20%) }
#crisis_highlight.p_yellow { background-color: hsla(47,100%,53%,20%) }
#crisis_highlight.p_green { background-color: hsla(99,36%,60%,20%) }

#crisis_highlight.p_red { border-color: hsl(354,85%,67%) }
#crisis_highlight.p_blue { border-color: hsl(207,67%,78%) }
#crisis_highlight.p_yellow { border-color: hsl(47,100%,53%) }
#crisis_highlight.p_green { border-color: hsl(99,36%,60%) }

#crisis_highlight.c0 { display: none }
#crisis_highlight.c2 { top: 216px; }
#crisis_highlight.c3 { top: 243px; }
#crisis_highlight.c4 { top: 270px; }
#crisis_highlight.c5 { top: 297px; }
#crisis_highlight.c6 { top: 324px; }
#crisis_highlight.c7 { top: 351px; }
#crisis_highlight.c8 { top: 378px; }
#crisis_highlight.c9 { top: 405px; }
#crisis_highlight.c10 { top: 432px; }
#crisis_highlight.c11 { top: 459px; }
#crisis_highlight.c12 { top: 486px; }

/* COMBAT MASK */

#combat_mask {
	box-sizing: border-box;
	position: absolute;
	z-index: 100;
	border-radius: 12px;
	box-shadow: 0px 2px 8px #000;
	background-color: #666;
	border: 2px solid #444;
	opacity: 0.8;
}