main { background-color: dimgray; }
#roles { background-color: gray; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_York .role_name { background-color: whitesmoke; }
#role_Lancaster .role_name { background-color: salmon; }
#turn_info { background-color: gainsboro; }
.role_held { float: right; }

#log { background-color: whitesmoke; }
#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { text-align: center; }
#log .h4 { text-decoration: underline; }
#log .h5 { text-decoration: underline; }

#log .h1 { background-color: hsl(0,0%,80%); }

#log div { padding-left: 20px; text-indent: -12px; }
#log div.i { padding-left: 32px; text-indent: -12px; }
#log div.ii { padding-left: 44px; text-indent: -12px; }

#log .card_tip { font-style: italic; }
#log .card_tip:hover { text-decoration: underline; }
#log .lord_tip:hover { cursor: pointer; text-decoration: underline; }
#log .locale_tip:hover { cursor: pointer; text-decoration: underline; }

.action {
	cursor: pointer;
}

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

/* PANELS */

.panel {
	min-width: 1350px;
	max-width: 1350px;
	margin: 12px auto 36px auto;
	background-color: #555;
}

.panel_header {
	background-color: #444;
	color: white;
	user-select: none;
	font-weight: bold;
	text-align: center;
	padding: 3px 1em;
}

.panel_body {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding: 18px;
	gap: 18px;
}

.court_panel {
	max-width: fit-content;
}

.court_body {
	gap: 24px;
}

/* ARTS OF WAR */

#arts_of_war_list {
	min-height: 260px;
}

/* PLAN */

#plan {
	min-height: 260px;
}

#plan_actions {
	background-color: #444;
	min-height: 130px;
}

#plan_actions.hide {
	display: none
}

#plan_actions .card {
	width: 93px;
	height: 130px;
	background-size: 93px 130px;
}

body.York #plan_actions .york { display: none }
body.Lancaster #plan_actions .lancaster { display: none }

/* BATTLE GRID WITH LORD MATS */

#battle_grid {
	display: grid;
	grid-template-columns: auto auto auto;
	margin: 0 auto;
	justify-content: center;
	padding: 18px;
}

#battle_grid .grid_array {
	width: 376px;
	height: 506px;
	padding: 36px 12px 12px 12px;
}

.grid_array { background-repeat: no-repeat }

.grid_array.action {
	background-image: url(images/battle_array_action.svg);
	background-position: top center;
}

#battle_grid {
	background-repeat: no-repeat;
}

#battle_header { grid-row: 1; grid-column: 1 / 4; }

.defender .att,
.attacker .def,
.defender .att .unit,
.attacker .def .unit,
.defender .att .asset,
.attacker .def .asset,
.defender .att .moved_fought,
.attacker .def .moved_fought,
.defender .att .feed_x2,
.attacker .def .feed_x2
{
	transform: rotate(180deg)
}

.defender .att .background,
.attacker .def .background
{
	border-color: #b1a05f #f2e19d #f2e19d #b1a05f;
	box-shadow: 0 0 0 1px #584800, -1px -2px 4px #0008;
}

.defender #grid_a1 { grid-row: 1; grid-column: 1; }
.defender #grid_a2 { grid-row: 1; grid-column: 2; }
.defender #grid_a3 { grid-row: 1; grid-column: 3; }
.defender #grid_d1 { grid-row: 2; grid-column: 1; }
.defender #grid_d2 { grid-row: 2; grid-column: 2; }
.defender #grid_d3 { grid-row: 2; grid-column: 3; }

.attacker #grid_a1 { grid-row: 2; grid-column: 3; }
.attacker #grid_a2 { grid-row: 2; grid-column: 2; }
.attacker #grid_a3 { grid-row: 2; grid-column: 1; }
.attacker #grid_d1 { grid-row: 1; grid-column: 3; }
.attacker #grid_d2 { grid-row: 1; grid-column: 2; }
.attacker #grid_d3 { grid-row: 1; grid-column: 1; }

/* MATS */

.mat {
	position: relative;
	width: 376px;
	height: 506px;
	z-index: 1;
}

.mat .background {
	position: absolute;
	width: 372px;
	height: 372px;
	border-radius: 12px;
	border-width: 2px;
	border-style: solid;
	background-color: #d1c07e;
	background-position: center;
	background-size: 360px 360px;
	background-repeat: no-repeat;
	z-index: 4;
}

#battle_grid .mat.ambushed .background {
	filter: grayscale(50%)
}

.court_body .mat.hidden .background {
	filter: grayscale(100%)
}

.mat.command .background {
	box-shadow: 0 0 0 1px #584800, 0 0 0 3px gold;
}

.mat.selected .background {
	box-shadow: 0 0 0 1px #584800, 0 0 0 4px yellow;
}

.mat .capabilities {
	position: absolute;
	width: 372px;
	height: 260px;
	z-index: 2;
	top: 246px;
	left: 2px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0px;
}

.mat .events {
	position: absolute;
	z-index: 3;
	width: 372px;
	height: 260px;
	left: 2px;
	top: -36px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0px;
	transition-property: top;
	transition-duration: 100ms;
}

.mat .events:hover {
	top: -130px;
}

.mat .events:empty {
	display: none;
}

.mat .moved_fought, .mat .feed_x2 {
	position: absolute;
	z-index: 5;
}

.mat .feed_x2 { left: 8px; top: 164px; }
.mat .moved_fought.one { right: 72px; top: 12px; }
.mat .moved_fought.two { right: 66px; top: 6px; }

body.shift .capabilities,
body.shift .events,
body.shift #capabilities1,
body.shift #capabilities2 {
	z-index: 200;
}

.mat .forces, .mat .routed, .mat .assets {
	position: absolute;
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	justify-items: center;
	align-content: center;
	align-items: center;
	gap: 4px 6px;
	z-index: 5;
	//background-color: #f004;
}

.mat > .background > div {
	//outline: 1px solid red;
}

.mat .forces {
	justify-content: center;
}

.mat .forces, .mat .routed {
	gap: 2px;
}

.mat .mustered_vassals {
	position: absolute;
	z-index: 5;
}

.mat .mustered_vassals .vassal {
	transition: margin 100ms;
	margin-top: -24px;
}

.mat .mustered_vassals:hover .vassal {
	margin-top: 1px;
}

.mat .mustered_vassals .vassal {
	margin-top: -38px;
}

.mat .shield {
	position: absolute;
	background-repeat: no-repeat;
}

.mat .shield {
	top: 10px; left: 6px;
	width: 75px; height: 85px;
	border-radius: 0 0 50% 50%;
	filter: drop-shadow(0 0 4px white);
}

.mat .shield.action {
	background-image: url(images/shield.svg);
	filter: drop-shadow(0 0 3px white);
}

.mat .forces { top: 96px; left: 66px; width: 240px; height: 96px; }
.mat .routed { top: 200px; left: 18px; width: 236px; height: 48px; }
.mat .assets { top: 255px; left: 24px; width: 230px; height: 96px; }
.mat .mustered_vassals { bottom: 134px; right: 6px; width: 94px; }

/* ASSETS */

.asset {
	width: 46px;
	height: 46px;
	background-size: cover;
	border: 2px solid transparent;
	border-radius: 8px;
	box-shadow: 0 0 0 1px #444, 0 1px 4px #0008;
}

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

.asset.selected {
	box-shadow: 0 0 0 1px #444, 0 0 0 4px yellow !important;
}

.asset.cart.x1 { background-image: url(images/cart_x1.png); }
.asset.cart.x2 { background-image: url(images/cart_x2.png) }
.asset.cart.x3 { background-image: url(images/cart_x3.png) }
.asset.cart.x4 { background-image: url(images/cart_x4.png) }
.asset.coin.x1 { background-image: url(images/coin_x1.png); }
.asset.coin.x2 { background-image: url(images/coin_x2.png) }
.asset.coin.x3 { background-image: url(images/coin_x3.png) }
.asset.coin.x4 { background-image: url(images/coin_x4.png) }
.asset.prov.x1 { background-image: url(images/prov_x1.png); }
.asset.prov.x2 { background-image: url(images/prov_x2.png) }
.asset.prov.x3 { background-image: url(images/prov_x3.png) }
.asset.prov.x4 { background-image: url(images/prov_x4.png) }
.asset.ship.x1 { background-image: url(images/ship_x1.png); }
.asset.ship.x2 { background-image: url(images/ship_x2.png) }

.marker {
	border: 2px solid aqua;
	border-radius: 8px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.marker.square {
	width: 46px;
	height: 46px;
}

.marker.small {
	width: 35px;
	height: 35px;
	border-radius: 6px;
}

.marker.circle {
	width: 50px;
	height: 50px;
	background-size: 50px 50px;
	border-radius: 50%;
}

.marker.turn.levy { background-image: url(images/levy.png) }
.marker.turn.campaign { background-image: url(images/campaign.png) }
.marker.battle { background-image: url(images/battle.png) }

.marker.towns.york { background-image: url(images/towns_york.png) }
.marker.cities.york { background-image: url(images/cities_york.png) }
.marker.fortresses.york { background-image: url(images/fortresses_york.png) }
.marker.ip.york { background-image: url(images/ip_york.png) }

.marker.towns.lancaster { background-image: url(images/towns_lancaster.png) }
.marker.cities.lancaster { background-image: url(images/cities_lancaster.png) }
.marker.fortresses.lancaster { background-image: url(images/fortresses_lancaster.png) }
.marker.ip.lancaster { background-image: url(images/ip_lancaster.png) }

.marker.moved_fought { background-image: url(images/moved_fought.png) }
.marker.feed_x2 { background-image: url(images/feed_x2.png) }
.marker.feed_x3 { background-image: url(images/feed_x3.png) }
.marker.fled { background-image: url(images/fled.png) }
.marker.exile { background-image: url(images/exile.png) }
.marker.exile_lancaster { background-image: url(images/exile_lancaster.png) }
.marker.exile_york { background-image: url(images/exile_york.png) }
.marker.exhausted { background-image: url(images/exhausted.png) }
.marker.end { background-image: url(images/end.png) }
.marker.depleted { background-image: url(images/depleted.png) }
.marker.depleted { background-image: url(images/depleted.png) }
.marker.victory_check { background-image: url(images/victory_check.png) }
.marker.valour { background-image: url(images/valour.png) }
.marker.retinue { background-image: url(images/retinue.png) }
.marker.rose.york { background-image: url(images/rose_york.png) }
.marker.rose.lancaster { background-image: url(images/rose_lancaster.png) }
.marker.source { background-image: url(images/source.png) }

/* UNITS */

.unit {
	background-size: contain;
	background-repeat: no-repeat;
	filter: drop-shadow(0px 2px 2px #0004);
}

.unit.action {
	filter:
		drop-shadow(2px 0px 0px white)
		drop-shadow(0px 2px 0px white)
		drop-shadow(0px -2px 0px white)
		drop-shadow(-2px 0px 0px white);
}

.unit.knights, .unit.sergeants, .unit.light_horse, .unit.asiatic_horse {
	width: 30px;
	height: 35px;
}

.unit.men_at_arms, .unit.militia, .unit.serfs {
	width: 43px;
	height: 35px;
}

.unit.knights { background-image: url(images/unit_knights.svg) }
.unit.sergeants { background-image: url(images/unit_sergeants.svg) }
.unit.light_horse { background-image: url(images/unit_light_horse.svg) }
.unit.asiatic_horse { background-image: url(images/unit_asiatic_horse.svg) }
.unit.men_at_arms { background-image: url(images/unit_men_at_arms.svg) }
.unit.militia { background-image: url(images/unit_militia.svg) }
.unit.serfs { background-image: url(images/unit_serfs.svg) }

/* CARDS */

.hand {
	margin: 24px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	min-height: 260px;
	max-width: 1350px;
	gap: 16px;
}

.card {
	background-size: 186px 260px;
	width: 186px;
	height: 260px;
	border-radius: 8px;
	transition: 100ms;
}

.card_info {
	border-bottom: 1px solid black;
}

.card_info .card {
	margin: 12px auto;
}

.card.disabled {
	filter: brightness(80%);
}

.card.action.york { background-color: #e1e6e8; box-shadow: 0 0 0 1px #666a6c, 0 0 0 4px white; }
.card.action.lancaster { background-color: #e1d6c1; box-shadow: 0 0 0 1px #665c4a, 0 0 0 4px white; }

.card.selected.york { background-color: #e1e6e8; box-shadow: 0 0 0 1px #666a6c, 0 0 0 4px yellow; }
.card.selected.lancaster { background-color: #e1d6c1; box-shadow: 0 0 0 1px #665c4a, 0 0 0 4px yellow; }

/* MAP */

#mapwrap {
	width: 1350px;
	height: 1725px;
	box-shadow: 0px 1px 10px #0008;
	z-index: 3;
}

#map {
	background-repeat: no-repeat;
	background-size: cover;
	width: 1350px;
	height: 1725px;
	overflow: clip;
}

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

.box {
	position: absolute;
	border: 3px solid gray;
}

.box.calendar.action {
	border-color: white;
	background-color: #fff6;
}

.locale {
	box-sizing: border-box;
	position: absolute;
	border: 3px solid gray;
}

.locale.town { border-radius: 24px 24px 0 0 }
.locale.city { border-radius: 18px 18px 0 0 }
.locale.fortress { border-radius: 0 0 0 0 }
.locale.calais { border-radius: 0 0 0 0 }
.locale.sea { border-radius: 50% }
.locale.exile { border-radius: 0 0 50% 50% }

.locale.action { border-color: white; box-shadow: 0 0 4px white; }
.locale.action.laden { border-color: white; box-shadow: 0 0 0 3px indianred; background-color: #cd5c5c66 }

.locale.supply_path { border-color: indianred; background-color: #cd5c5c66; }
.locale.supply_source { border-color: seagreen; background-color: #2e8b5766; }
.locale.supply_source.action { border-color: white; background-color: #2e8b5766; box-shadow: 0 0 0 3px seagreen; }

.locale.tip {
	background-color: #ff08;
	box-shadow: 0 0 8px #ff08;
}

.locale_markers {
	position: absolute;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 4px;
}

.marker.turn, .marker.end, .marker.ip, .marker.towns, .marker.cities, .marker.fortresses, .marker.victory_check {
	position: absolute;
}

/* PIECES */

.cylinder, .marker {
	transition-property: top, left;
	transition-duration: 700ms;
	transition-timing-function: ease;
}

.cylinder {
	position: absolute;
	width: 44px;
	height: 48px;
	background-size: 44px 48px;
	filter: drop-shadow(0px 2px 4px #0004);
}

.cylinder.command {
	filter:
		drop-shadow(2px 0px 0px gold)
		drop-shadow(0px 2px 0px gold)
		drop-shadow(0px -2px 0px gold)
		drop-shadow(-2px 0px 0px gold);
}

.cylinder.action {
	filter:
		drop-shadow(2px 0px 0px white)
		drop-shadow(0px 2px 0px white)
		drop-shadow(0px -2px 0px white)
		drop-shadow(-2px 0px 0px white);
}

.cylinder.selected {
	filter:
		drop-shadow(2px 0px 0px yellow)
		drop-shadow(0px 2px 0px yellow)
		drop-shadow(0px -2px 0px yellow)
		drop-shadow(-2px 0px 0px yellow);
}

.cylinder.york.lord_devon { background-image:url(images/lord_york_devon.svg) }
.cylinder.york.lord_edward_iv { background-image:url(images/lord_york_edward_iv.svg) }
.cylinder.york.lord_gloucester_1 { background-image:url(images/lord_york_gloucester_1.svg) }
.cylinder.york.lord_gloucester_2 { background-image:url(images/lord_york_gloucester_2.svg) }
.cylinder.york.lord_richard_iii { background-image:url(images/lord_york_gloucester_2.svg) }
.cylinder.york.lord_henry_tudor { background-image:url(images/lord_york_henry_tudor.svg) }
.cylinder.york.lord_march { background-image:url(images/lord_york_march.svg) }
.cylinder.york.lord_norfolk { background-image:url(images/lord_york_norfolk.svg) }
.cylinder.york.lord_northumberland_y1 { background-image:url(images/lord_york_northumberland.svg) }
.cylinder.york.lord_northumberland_y2 { background-image:url(images/lord_york_northumberland.svg) }
.cylinder.york.lord_pembroke { background-image:url(images/lord_york_pembroke.svg) }
.cylinder.york.lord_rutland { background-image:url(images/lord_york_rutland.svg) }
.cylinder.york.lord_salisbury { background-image:url(images/lord_york_salisbury.svg) }
.cylinder.york.lord_warwick_y { background-image:url(images/lord_york_warwick.svg) }
.cylinder.york.lord_york { background-image:url(images/lord_york_york.svg) }

.cylinder.lancaster.lord_buckingham { background-image:url(images/lord_lancaster_buckingham.svg) }
.cylinder.lancaster.lord_clarence { background-image:url(images/lord_lancaster_clarence.svg) }
.cylinder.lancaster.lord_exeter_1 { background-image:url(images/lord_lancaster_exeter.svg) }
.cylinder.lancaster.lord_exeter_2 { background-image:url(images/lord_lancaster_exeter.svg) }
.cylinder.lancaster.lord_henry_tudor { background-image:url(images/lord_lancaster_henry_tudor.svg) }
.cylinder.lancaster.lord_henry_vi { background-image:url(images/lord_lancaster_henry_vi.svg) }
.cylinder.lancaster.lord_jasper_tudor_1 { background-image:url(images/lord_lancaster_jasper_tudor.svg) }
.cylinder.lancaster.lord_jasper_tudor_2 { background-image:url(images/lord_lancaster_jasper_tudor.svg) }
.cylinder.lancaster.lord_margaret { background-image:url(images/lord_lancaster_margaret.svg) }
.cylinder.lancaster.lord_northumberland_l { background-image:url(images/lord_lancaster_northumberland.svg) }
.cylinder.lancaster.lord_oxford { background-image:url(images/lord_lancaster_oxford.svg) }
.cylinder.lancaster.lord_somerset_1 { background-image:url(images/lord_lancaster_somerset_1.svg) }
.cylinder.lancaster.lord_somerset_2 { background-image:url(images/lord_lancaster_somerset_2.svg) }
.cylinder.lancaster.lord_warwick_l { background-image:url(images/lord_lancaster_warwick.svg) }

.vassal.vassal_beaumont { background-image: url(images/vassal_beaumont.png) }
.vassal.vassal_bonville { background-image: url(images/vassal_bonville.png) }
.vassal.vassal_devon { background-image: url(images/vassal_devon.png) }
.vassal.vassal_dudley { background-image: url(images/vassal_dudley.png) }
.vassal.vassal_essex { background-image: url(images/vassal_essex.png) }
.vassal.vassal_fauconberg { background-image: url(images/vassal_fauconberg.png) }
.vassal.vassal_norfolk { background-image: url(images/vassal_norfolk.png) }
.vassal.vassal_oxford { background-image: url(images/vassal_oxford.png) }
.vassal.vassal_shrewsbury { background-image: url(images/vassal_shrewsbury.png) }
.vassal.vassal_stanley { background-image: url(images/vassal_stanley.png) }
.vassal.vassal_suffolk { background-image: url(images/vassal_suffolk.png) }
.vassal.vassal_westmorld { background-image: url(images/vassal_westmorld.png) }
.vassal.vassal_worcester { background-image: url(images/vassal_worcester.png) }

.seat.lancaster.lord_buckingham { background-image: url(images/seat_lancaster_buckingham.png) }
.seat.lancaster.lord_clarence { background-image: url(images/seat_lancaster_clarence.png) }
.seat.lancaster.lord_exeter { background-image: url(images/seat_lancaster_exeter.png) }
.seat.lancaster.lord_henry_tudor { background-image: url(images/seat_lancaster_henry_tudor.png) }
.seat.lancaster.lord_henry_vi { background-image: url(images/seat_lancaster_henry_vi.png) }
.seat.lancaster.lord_jasper_tudor { background-image: url(images/seat_lancaster_jasper_tudor.png) }
.seat.lancaster.lord_margaret { background-image: url(images/seat_lancaster_margaret.png) }
.seat.lancaster.lord_northumberland { background-image: url(images/seat_lancaster_northumberland.png) }
.seat.lancaster.lord_oxford { background-image: url(images/seat_lancaster_oxford.png) }
.seat.lancaster.lord_somerset { background-image: url(images/seat_lancaster_somerset.png) }
.seat.lancaster.lord_warwick { background-image: url(images/seat_lancaster_warwick.png) }

.seat.york.lord_devon { background-image: url(images/seat_york_devon.png) }
.seat.york.lord_edward_iv { background-image: url(images/seat_york_edward_iv.png) }
.seat.york.lord_gloucester { background-image: url(images/seat_york_gloucester.png) }
.seat.york.lord_march { background-image: url(images/seat_york_march.png) }
.seat.york.lord_norfolk { background-image: url(images/seat_york_norfolk.png) }
.seat.york.lord_northumberland { background-image: url(images/seat_york_northumberland.png) }
.seat.york.lord_pembroke { background-image: url(images/seat_york_pembroke.png) }
.seat.york.lord_rutland { background-image: url(images/seat_york_rutland.png) }
.seat.york.lord_salisbury { background-image: url(images/seat_york_salisbury.png) }
.seat.york.lord_warwick { background-image: url(images/seat_york_warwick.png) }
.seat.york.lord_york { background-image: url(images/seat_york_york.png) }

/* BACKGROUND COLORS AND BORDERS */

/* CARD IMAGES */

.card.cc.lancaster.lancaster_1 { background-image: url(cards.1x/cc_lancaster_1.png) }
.card.cc.lancaster.lancaster_2 { background-image: url(cards.1x/cc_lancaster_2.png) }
.card.cc.lancaster.lancaster_3 { background-image: url(cards.1x/cc_lancaster_3.png) }
.card.cc.lancaster.lancaster_4 { background-image: url(cards.1x/cc_lancaster_4.png) }
.card.cc.lancaster.lancaster_5 { background-image: url(cards.1x/cc_lancaster_5.png) }
.card.cc.lancaster.lancaster_6 { background-image: url(cards.1x/cc_lancaster_6.png) }
.card.cc.lancaster.lancaster_7 { background-image: url(cards.1x/cc_lancaster_7.png) }
.card.cc.lancaster.lancaster_8 { background-image: url(cards.1x/cc_lancaster_8.png) }
.card.cc.lancaster.lancaster_9 { background-image: url(cards.1x/cc_lancaster_9.png) }
.card.cc.lancaster.lancaster_10 { background-image: url(cards.1x/cc_lancaster_10.png) }
.card.cc.lancaster.lancaster_11 { background-image: url(cards.1x/cc_lancaster_11.png) }
.card.cc.lancaster.lancaster_12 { background-image: url(cards.1x/cc_lancaster_12.png) }
.card.cc.york.york_1 { background-image: url(cards.1x/cc_york_1.png) }
.card.cc.york.york_2 { background-image: url(cards.1x/cc_york_2.png) }
.card.cc.york.york_3 { background-image: url(cards.1x/cc_york_3.png) }
.card.cc.york.york_4 { background-image: url(cards.1x/cc_york_4.png) }
.card.cc.york.york_5 { background-image: url(cards.1x/cc_york_5.png) }
.card.cc.york.york_6 { background-image: url(cards.1x/cc_york_6.png) }
.card.cc.york.york_7 { background-image: url(cards.1x/cc_york_7.png) }
.card.cc.york.york_8 { background-image: url(cards.1x/cc_york_8.png) }
.card.cc.york.york_9 { background-image: url(cards.1x/cc_york_9.png) }
.card.cc.york.york_10 { background-image: url(cards.1x/cc_york_10.png) }
.card.cc.york.york_11 { background-image: url(cards.1x/cc_york_11.png) }
.card.cc.york.york_12 { background-image: url(cards.1x/cc_york_12.png) }
.card.cc.york.york_13 { background-image: url(cards.1x/cc_york_13.png) }
.card.lord.lancaster.lancaster_1 { background-image: url(cards.1x/lord_lancaster_1.png) }
.card.lord.lancaster.lancaster_2 { background-image: url(cards.1x/lord_lancaster_2.png) }
.card.lord.lancaster.lancaster_3 { background-image: url(cards.1x/lord_lancaster_3.png) }
.card.lord.lancaster.lancaster_4 { background-image: url(cards.1x/lord_lancaster_4.png) }
.card.lord.lancaster.lancaster_5 { background-image: url(cards.1x/lord_lancaster_5.png) }
.card.lord.lancaster.lancaster_6 { background-image: url(cards.1x/lord_lancaster_6.png) }
.card.lord.lancaster.lancaster_7 { background-image: url(cards.1x/lord_lancaster_7.png) }
.card.lord.lancaster.lancaster_8 { background-image: url(cards.1x/lord_lancaster_8.png) }
.card.lord.lancaster.lancaster_9 { background-image: url(cards.1x/lord_lancaster_9.png) }
.card.lord.lancaster.lancaster_10 { background-image: url(cards.1x/lord_lancaster_10.png) }
.card.lord.lancaster.lancaster_11 { background-image: url(cards.1x/lord_lancaster_11.png) }
.card.lord.lancaster.lancaster_12 { background-image: url(cards.1x/lord_lancaster_12.png) }
.card.lord.lancaster.lancaster_13 { background-image: url(cards.1x/lord_lancaster_13.png) }
.card.lord.lancaster.lancaster_14 { background-image: url(cards.1x/lord_lancaster_14.png) }
.card.lord.lancaster.lancaster_15 { background-image: url(cards.1x/lord_lancaster_15.png) }
.card.lord.york.york_1 { background-image: url(cards.1x/lord_york_1.png) }
.card.lord.york.york_2 { background-image: url(cards.1x/lord_york_2.png) }
.card.lord.york.york_3 { background-image: url(cards.1x/lord_york_3.png) }
.card.lord.york.york_4 { background-image: url(cards.1x/lord_york_4.png) }
.card.lord.york.york_5 { background-image: url(cards.1x/lord_york_5.png) }
.card.lord.york.york_6 { background-image: url(cards.1x/lord_york_6.png) }
.card.lord.york.york_7 { background-image: url(cards.1x/lord_york_7.png) }
.card.lord.york.york_8 { background-image: url(cards.1x/lord_york_8.png) }
.card.lord.york.york_9 { background-image: url(cards.1x/lord_york_9.png) }
.card.lord.york.york_10 { background-image: url(cards.1x/lord_york_10.png) }
.card.lord.york.york_11 { background-image: url(cards.1x/lord_york_11.png) }
.card.lord.york.york_12 { background-image: url(cards.1x/lord_york_12.png) }
.card.lord.york.york_13 { background-image: url(cards.1x/lord_york_13.png) }
.card.lord.york.york_14 { background-image: url(cards.1x/lord_york_14.png) }
.card.lord.york.york_15 { background-image: url(cards.1x/lord_york_15.png) }
.card.aow.york.york_1 { background-image: url(cards.1x/awo_york_1.png) }
.card.aow.york.york_2 { background-image: url(cards.1x/awo_york_2.png) }
.card.aow.york.york_3 { background-image: url(cards.1x/awo_york_3.png) }
.card.aow.york.york_4 { background-image: url(cards.1x/awo_york_4.png) }
.card.aow.york.york_5 { background-image: url(cards.1x/awo_york_5.png) }
.card.aow.york.york_6 { background-image: url(cards.1x/awo_york_6.png) }
.card.aow.york.york_7 { background-image: url(cards.1x/awo_york_7.png) }
.card.aow.york.york_8 { background-image: url(cards.1x/awo_york_8.png) }
.card.aow.york.york_9 { background-image: url(cards.1x/awo_york_9.png) }
.card.aow.york.york_10 { background-image: url(cards.1x/awo_york_10.png) }
.card.aow.york.york_11 { background-image: url(cards.1x/awo_york_11.png) }
.card.aow.york.york_12 { background-image: url(cards.1x/awo_york_12.png) }
.card.aow.york.york_13 { background-image: url(cards.1x/awo_york_13.png) }
.card.aow.york.york_14 { background-image: url(cards.1x/awo_york_14.png) }
.card.aow.york.york_15 { background-image: url(cards.1x/awo_york_15.png) }
.card.aow.york.york_16 { background-image: url(cards.1x/awo_york_16.png) }
.card.aow.york.york_17 { background-image: url(cards.1x/awo_york_17.png) }
.card.aow.york.york_18 { background-image: url(cards.1x/awo_york_18.png) }
.card.aow.york.york_19 { background-image: url(cards.1x/awo_york_19.png) }
.card.aow.york.york_20 { background-image: url(cards.1x/awo_york_20.png) }
.card.aow.york.york_21 { background-image: url(cards.1x/awo_york_21.png) }
.card.aow.york.york_22 { background-image: url(cards.1x/awo_york_22.png) }
.card.aow.york.york_23 { background-image: url(cards.1x/awo_york_23.png) }
.card.aow.york.york_24 { background-image: url(cards.1x/awo_york_24.png) }
.card.aow.york.york_25 { background-image: url(cards.1x/awo_york_25.png) }
.card.aow.york.york_26 { background-image: url(cards.1x/awo_york_26.png) }
.card.aow.york.york_27 { background-image: url(cards.1x/awo_york_27.png) }
.card.aow.york.york_28 { background-image: url(cards.1x/awo_york_28.png) }
.card.aow.york.york_29 { background-image: url(cards.1x/awo_york_29.png) }
.card.aow.york.york_30 { background-image: url(cards.1x/awo_york_30.png) }
.card.aow.york.york_31 { background-image: url(cards.1x/awo_york_31.png) }
.card.aow.york.york_32 { background-image: url(cards.1x/awo_york_32.png) }
.card.aow.york.york_33 { background-image: url(cards.1x/awo_york_33.png) }
.card.aow.york.york_34 { background-image: url(cards.1x/awo_york_34.png) }
.card.aow.york.york_35 { background-image: url(cards.1x/awo_york_35.png) }
.card.aow.york.york_36 { background-image: url(cards.1x/awo_york_36.png) }
.card.aow.york.york_37 { background-image: url(cards.1x/awo_york_37.png) }
.card.aow.lancaster.lancaster_1 { background-image: url(cards.1x/awo_lancaster_1.png) }
.card.aow.lancaster.lancaster_2 { background-image: url(cards.1x/awo_lancaster_2.png) }
.card.aow.lancaster.lancaster_3 { background-image: url(cards.1x/awo_lancaster_3.png) }
.card.aow.lancaster.lancaster_4 { background-image: url(cards.1x/awo_lancaster_4.png) }
.card.aow.lancaster.lancaster_5 { background-image: url(cards.1x/awo_lancaster_5.png) }
.card.aow.lancaster.lancaster_6 { background-image: url(cards.1x/awo_lancaster_6.png) }
.card.aow.lancaster.lancaster_7 { background-image: url(cards.1x/awo_lancaster_7.png) }
.card.aow.lancaster.lancaster_8 { background-image: url(cards.1x/awo_lancaster_8.png) }
.card.aow.lancaster.lancaster_9 { background-image: url(cards.1x/awo_lancaster_9.png) }
.card.aow.lancaster.lancaster_10 { background-image: url(cards.1x/awo_lancaster_10.png) }
.card.aow.lancaster.lancaster_11 { background-image: url(cards.1x/awo_lancaster_11.png) }
.card.aow.lancaster.lancaster_12 { background-image: url(cards.1x/awo_lancaster_12.png) }
.card.aow.lancaster.lancaster_13 { background-image: url(cards.1x/awo_lancaster_13.png) }
.card.aow.lancaster.lancaster_14 { background-image: url(cards.1x/awo_lancaster_14.png) }
.card.aow.lancaster.lancaster_15 { background-image: url(cards.1x/awo_lancaster_15.png) }
.card.aow.lancaster.lancaster_16 { background-image: url(cards.1x/awo_lancaster_16.png) }
.card.aow.lancaster.lancaster_17 { background-image: url(cards.1x/awo_lancaster_17.png) }
.card.aow.lancaster.lancaster_18 { background-image: url(cards.1x/awo_lancaster_18.png) }
.card.aow.lancaster.lancaster_19 { background-image: url(cards.1x/awo_lancaster_19.png) }
.card.aow.lancaster.lancaster_20 { background-image: url(cards.1x/awo_lancaster_20.png) }
.card.aow.lancaster.lancaster_21 { background-image: url(cards.1x/awo_lancaster_21.png) }
.card.aow.lancaster.lancaster_22 { background-image: url(cards.1x/awo_lancaster_22.png) }
.card.aow.lancaster.lancaster_23 { background-image: url(cards.1x/awo_lancaster_23.png) }
.card.aow.lancaster.lancaster_24 { background-image: url(cards.1x/awo_lancaster_24.png) }
.card.aow.lancaster.lancaster_25 { background-image: url(cards.1x/awo_lancaster_25.png) }
.card.aow.lancaster.lancaster_26 { background-image: url(cards.1x/awo_lancaster_26.png) }
.card.aow.lancaster.lancaster_27 { background-image: url(cards.1x/awo_lancaster_27.png) }
.card.aow.lancaster.lancaster_28 { background-image: url(cards.1x/awo_lancaster_28.png) }
.card.aow.lancaster.lancaster_29 { background-image: url(cards.1x/awo_lancaster_29.png) }
.card.aow.lancaster.lancaster_30 { background-image: url(cards.1x/awo_lancaster_30.png) }
.card.aow.lancaster.lancaster_31 { background-image: url(cards.1x/awo_lancaster_31.png) }
.card.aow.lancaster.lancaster_32 { background-image: url(cards.1x/awo_lancaster_32.png) }
.card.aow.lancaster.lancaster_33 { background-image: url(cards.1x/awo_lancaster_33.png) }
.card.aow.lancaster.lancaster_34 { background-image: url(cards.1x/awo_lancaster_34.png) }
.card.aow.lancaster.lancaster_35 { background-image: url(cards.1x/awo_lancaster_35.png) }
.card.aow.lancaster.lancaster_36 { background-image: url(cards.1x/awo_lancaster_36.png) }
.card.aow.lancaster.lancaster_37 { background-image: url(cards.1x/awo_lancaster_37.png) }

/* ULTRA-WIDE SCREEN LAYOUTS */

@media (min-width: 2800px) {
	main { display: grid; gap: 0 12px; }
	main { grid-template-columns: 0 1350px auto 0; }
	#sec_map { grid-row: 1; grid-column: 2 }
	#sec_battle { grid-row: 2; grid-column: 2 }
	#sec_lords { grid-row: 1 / 3; grid-column: 3 }
}

@media (min-width: 3200px) {
	main { grid-template-columns: 36px 1350px auto 0; }
}

@media (min-width: 4100px) {
	main { grid-template-columns: 0 1350px 1fr 1350px 0; }
	#sec_map { grid-row: 1; grid-column: 2 }
	#sec_lords { grid-row: 1; grid-column: 3 }
	#sec_battle { grid-row: 1; grid-column: 4 }
}