main { background-color: dimgray; }
#roles { background-color: silver; }
header { background-color: silver; }
header.your_turn { background-color: orange; }
#role_Axis { background-color: darkseagreen; }
#role_Allied { background-color: tan; }

#log { background-color: ghostwhite; }
#log .h1 { background-color: dimgray; color: ghostwhite; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
#log .h3 { background-color: gainsboro; text-align: center; }
#log .h4 { text-decoration: underline; font-style: italic; }
#log .axis { background-color: hsl(120, 25%, 75%) }
#log .allied { background-color: hsl(35, 45%, 80%) }
#log > .i { padding-left: 20px; }
#log > .ii { padding-left: 32px; }
#log > div > .i { padding-left: 12px; }
#log .hex:hover { cursor: pointer; text-decoration: underline; }

.action {
	cursor: pointer;
}

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

/* CARDS */

.hand {
	margin: 0 auto 85px auto;
	padding: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 170px;
	min-width: 850px;
	max-width: 2624px;
	gap: 20px;
}

@media (max-width: 800px) {
	.hand { min-width: 2624px; }
}

.card {
	background-size: cover;
	background-repeat: no-repeat;
	background-color: ivory;
	width: 124px;
	height: 170px;
	border-radius: 8px;
	box-shadow: 1px 1px 4px #0008;
	transition: 100ms;
}

.card.real {
	background-image: url(card_real.svg);
}

.card.dummy {
	background-image: url(card_dummy.svg);
}

.card.action:hover {
	transform: scale(1.1);
}


/* BATTLE & PURSUIT DIALOGS */

#battle, #pursuit {
	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: 524px; /* 6 blocks wide */
	min-width: 550px; /* 4.5 hexes wide */
}

@media (max-width: 400px) {
	#battle, #pursuit {
		min-width: 90vw;
		min-width: 90dvw;
	}
}

/* BATTLE DIALOG */

#battle { background-color: #d6c4a9; background: url(texture_clear.png); }
#battle_header { background-color: brown; color: gold }
#battle_hits { background-color: #c4ab8b; }
#battle_buttons { background-color: #c4ab8b; }
#battle_message { background-color: #d6c4a9; }

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

	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-image: url(gui_box_maximize.svg);
}

#battle[open] #battle_header {
	cursor: n-resize;
	border-bottom: 1px solid black;
	background-image: url(gui_box_minimize.svg);
}

#battle_message {
	padding: 2px 8px;
	line-height: 24px;
	min-height: 24px;
	text-align: center;
	border-top: 1px solid black;
}

#battle_hits {
	padding: 4px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	border-bottom: 1px solid black;
}

#battle_hits .hits_text {
	width: 24px;
}

#battle_hits .hits_icon {
	display: block;
	vertical-align: middle
}

.battle_line {
	margin: 24px;
	min-height: 60px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

#battle_buttons {
	padding: 12px;
	min-height: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	border-top: 1px solid black;
}

/* PURSUIT FIRE DIALOG */

#pursuit { background-color: #d6c4a9; background: url(texture_mountain.png); }
#pursuit_header { background-color: brown; color: gold }
#pursuit_hits { background-color: #c4ab8b; }
#pursuit_buttons { background-color: #c4ab8b; }
#pursuit_message { background-color: #d6c4a9; }

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

	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-image: url(gui_box_maximize.svg);
}

#pursuit[open] #pursuit_header {
	cursor: n-resize;
	border-bottom: 1px solid black;
	background-image: url(gui_box_minimize.svg);
}

#pursuit_hits {
	padding: 4px;
	text-align: center;
	border-bottom: 1px solid black;
}

#pursuit_message {
	padding: 2px 8px;
	line-height: 24px;
	min-height: 24px;
	text-align: center;
	border-top: 1px solid black;
}

#pursuit_buttons {
	padding: 12px;
	min-height: 28px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	border-top: 1px solid black;
}

/* TABLES */

table { border-collapse: collapse; font-size: 12px; }
td.blank { background-color: transparent; border: none }
td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
td { min-width: 16px; height: 19px; }
th { background-color: #222; color: oldlace; }
td { background-color: oldlace; }
table .required_target { background-color: #b8d9ca }
table .must_fire_first { background-color: #f7dc68 }
table .only_unsupported { background-color: #f0b0af }
td span { padding: 0 4px }
td img { vertical-align: middle }

/* MAP */

#mapwrap {
       width: 2672px;
       height: 960px;
}

#map {
	background-image: url(map75.jpg);
	background-size: 2672px 960px;
	width: 2672px;
	height: 960px;
	overflow: clip;
	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
}

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

#mapsvg {
	display: block;
	position: absolute;
}

#calendar, #calendar2 {
	position: absolute;
	display: flex;
	top: 24px;
	left: 1956px;
	gap: 20px;
}

.month {
	visibility: hidden;
	width: 46px;
	height: 46px;
	background-color: #fee0bf;
	background-color: wheat;
	font-size: 28px;
	line-height: 46px;
	font-weight: bold;
	text-align: center;
	border: 2px solid #222;
	color: #222;
}

.month.show {
	visibility: visible;
}

.month.now {
	background-color: tan;
	box-shadow: 0 0 0 4px #fff4;
}

/* MAP */

svg .hex {
	stroke-width: 2;
}

svg .hex.exit {
	fill: black;
	fill-opacity: 0.125;
}

svg .hex.refit.action {
	stroke: lightskyblue;
}

svg .hex.action {
	stroke: ivory;
	stroke-dasharray: 2 2;
	stroke-dashoffset: 1;
}

svg .hex.action.forced_march {
	stroke: crimson;
}

svg .hex.selected {
	stroke: yellow;
	stroke-dasharray: none;
}

svg .hex.tip {
	stroke: yellow;
	stroke-width: 3;
	stroke-dasharray: 4 4;
}

/* HEX CONTROL */

svg .fortress.allied {
	fill: firebrick;
	stroke: darkred;
}

svg .fortress.axis {
	fill: forestgreen;
	stroke: darkgreen;
}

svg .side {
	stroke-linecap: round;
	stroke-dasharray: 54 100;
	stroke-dashoffset: -8;
	stroke-width: 4;
}

svg .side.axis_control {
	stroke: darkgreen;
}

svg .side.allied_control {
	stroke: darkred;
}

body.Allied svg .side.axis_control { stroke: #222 }
body.Axis svg .side.allied_control { stroke: #222 }
body.Allied svg .side.allied_control { stroke: none }
body.Axis svg .side.axis_control { stroke: none }

/* SUPPLY LINES */

svg #lines line {
	pointer-events: none;
	stroke: none;
	stroke-width: 6px;
	stroke-linecap: round;
}

svg .hex.axis_supply {
	fill: forestgreen;
	fill-opacity: 0.4;
}

svg .hex.allied_supply {
	fill: firebrick;
	fill-opacity: 0.4;
}

svg .hex.axis_supply.allied_supply {
	fill: blue;
	fill-opacity: 0.4;
}

svg #lines line.axis_supply {
	stroke: darkgreen;
}

svg #lines line.allied_supply {
	stroke: darkred;
}

svg #lines line.axis_supply.allied_supply {
	stroke: navy;
}

/* UNITS */

.minefield {
	position: absolute;
	pointer-events: none;
	width: 48px;
	height: 48px;
	background-image: url(minefield.svg);
	opacity: 0.5;
}

#map .unit {
	position: absolute;
}

.unit {
	background-size: 1000%;
	background-repeat: no-repeat;
	border-style: solid;
	transition: top 200ms, left 200ms, transform 200ms;
}

.unit {
	width: 51px;
	height: 51px;
	border-width: 4px;
}

.unit.m {
	width: 42px;
	height: 42px;
	border-width: 4px;
}

.unit.revealed {
	background-image: url(units.svg);
}

#mapwrap[data-fit="both"] .unit.revealed {
	background-image: url(units-simple.svg);
}

.unit.axis {
	background-color: hsl(80, 20%, 60%);
	border-color: hsl(80, 20%, 50%);
	box-shadow: 0 0 2px 1px hsl(80, 20%, 20%);
}

.unit.axis.eliminated,
.unit.axis.fired,
.unit.axis.moved:not(.disrupted):not(.unsupplied) {
	border-color: hsl(80, 20%, 40%);
}

.unit.axis.eliminated:not(.revealed),
.unit.axis.fired:not(.revealed),
.unit.axis.moved:not(.revealed) {
	background-color: hsl(80, 20%, 50%);
}

.unit.allied {
	background-color: hsl(35, 40%, 60%);
	border-color: hsl(35, 40%, 50%);
	box-shadow: 0 0 2px 1px hsl(30, 40%, 20%);
}

.unit.allied.eliminated,
.unit.allied.fired,
.unit.allied.moved:not(.disrupted):not(.unsupplied) {
	border-color: hsl(35, 40%, 40%);
}

.unit.allied.eliminated:not(.revealed),
.unit.allied.fired:not(.revealed),
.unit.allied.moved:not(.revealed) {
	background-color: hsl(35, 40%, 50%);
}

.unit.moved:not(.revealed) {
	background-image: url(moved.svg);
	background-size: 75%;
	background-position: center bottom;
}

.unit.eliminated:not(.revealed) {
	background-image: url(eliminated.svg);
	background-size: 60%;
	background-position: center;
}

.unit.axis.revealed {
	background-color: #abba8e;
}

.unit.axis.italian.revealed {
	background-color: #f9e3b3;
}

.unit.allied.revealed {
	background-color: #e4d1ab;
}

.unit.disrupted {
	border-color: #222;
	box-shadow: 0 0 2px 1px black;
}

.unit.disrupted:not(.revealed) {
	background-image: url(disrupted.svg);
	background-size: 75%;
	background-position: center;
}

.unit.unsupplied {
	border-color: #c00;
	box-shadow: 0 0 2px 1px darkred;
}

.unit.unsupplied:not(.revealed) {
	background-image: url(unsupplied.svg);
	background-size: 75%;
	background-position: center;
}

.unit.disrupted.unsupplied {
	border-color: #222 #c00;
}

.unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
	border-color: #c00 #222;
}

.unit.disrupted.unsupplied:not(.revealed) {
	background-image: url(unsupplied.svg), url(disrupted.svg);
	background-size: 50%, 50%;
	background-position: 0% 90%, 90% 10%;
}

.unit.action {
	box-shadow: 0 0 0 2px white;
}

.unit.action.hit {
	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
}

.unit.selected {
	box-shadow: 0 0 0 2px yellow;
}

.unit.r0 { transform: rotate(0deg); }
.unit.r1 { transform: rotate(-90deg); }
.unit.r2 { transform: rotate(-180deg); }
.unit.r3 { transform: rotate(-270deg); }

.unit.r0.hit1 { transform: rotate(-15deg); }
.unit.r1.hit1 { transform: rotate(-105deg); }
.unit.r2.hit1 { transform: rotate(-195deg); }
.unit.r3.hit1 { transform: rotate(-285deg); }

.unit.r0.hit2 { transform: rotate(-30deg); }
.unit.r1.hit2 { transform: rotate(-120deg); }
.unit.r2.hit2 { transform: rotate(-210deg); }
.unit.r3.hit2 { transform: rotate(-300deg); }

.unit.r0.hit3 { transform: rotate(-45deg); }
.unit.r1.hit3 { transform: rotate(-135deg); }
.unit.r2.hit3 { transform: rotate(-225deg); }
.unit.r3.hit3 { transform: rotate(-315deg); }

.unit.u0{background-position:0% 0%}
.unit.u1{background-position:11.11111111111111% 0%}
.unit.u2{background-position:22.22222222222222% 0%}
.unit.u3{background-position:33.33333333333333% 0%}
.unit.u4{background-position:44.44444444444444% 0%}
.unit.u5{background-position:55.55555555555556% 0%}
.unit.u6{background-position:66.66666666666666% 0%}
.unit.u7{background-position:77.77777777777777% 0%}
.unit.u8{background-position:88.88888888888889% 0%}
.unit.u9{background-position:100% 0%}
.unit.u10{background-position:0% 11.11111111111111%}
.unit.u11{background-position:11.11111111111111% 11.11111111111111%}
.unit.u12{background-position:22.22222222222222% 11.11111111111111%}
.unit.u13{background-position:33.33333333333333% 11.11111111111111%}
.unit.u14{background-position:44.44444444444444% 11.11111111111111%}
.unit.u15{background-position:55.55555555555556% 11.11111111111111%}
.unit.u16{background-position:66.66666666666666% 11.11111111111111%}
.unit.u17{background-position:77.77777777777777% 11.11111111111111%}
.unit.u18{background-position:88.88888888888889% 11.11111111111111%}
.unit.u19{background-position:100% 11.11111111111111%}
.unit.u20{background-position:0% 22.22222222222222%}
.unit.u21{background-position:11.11111111111111% 22.22222222222222%}
.unit.u22{background-position:22.22222222222222% 22.22222222222222%}
.unit.u23{background-position:33.33333333333333% 22.22222222222222%}
.unit.u24{background-position:44.44444444444444% 22.22222222222222%}
.unit.u25{background-position:55.55555555555556% 22.22222222222222%}
.unit.u26{background-position:66.66666666666666% 22.22222222222222%}
.unit.u27{background-position:77.77777777777777% 22.22222222222222%}
.unit.u28{background-position:88.88888888888889% 22.22222222222222%}
.unit.u29{background-position:100% 22.22222222222222%}
.unit.u30{background-position:0% 33.33333333333333%}
.unit.u31{background-position:11.11111111111111% 33.33333333333333%}
.unit.u32{background-position:22.22222222222222% 33.33333333333333%}
.unit.u33{background-position:33.33333333333333% 33.33333333333333%}
.unit.u34{background-position:44.44444444444444% 33.33333333333333%}
.unit.u35{background-position:55.55555555555556% 33.33333333333333%}
.unit.u36{background-position:66.66666666666666% 33.33333333333333%}
.unit.u37{background-position:77.77777777777777% 33.33333333333333%}
.unit.u38{background-position:88.88888888888889% 33.33333333333333%}
.unit.u39{background-position:100% 33.33333333333333%}
.unit.u40{background-position:0% 44.44444444444444%}
.unit.u41{background-position:11.11111111111111% 44.44444444444444%}
.unit.u42{background-position:22.22222222222222% 44.44444444444444%}
.unit.u43{background-position:33.33333333333333% 44.44444444444444%}
.unit.u44{background-position:44.44444444444444% 44.44444444444444%}
.unit.u45{background-position:55.55555555555556% 44.44444444444444%}
.unit.u46{background-position:66.66666666666666% 44.44444444444444%}
.unit.u47{background-position:77.77777777777777% 44.44444444444444%}
.unit.u48{background-position:88.88888888888889% 44.44444444444444%}
.unit.u49{background-position:100% 44.44444444444444%}
.unit.u50{background-position:0% 55.55555555555556%}
.unit.u51{background-position:11.11111111111111% 55.55555555555556%}
.unit.u52{background-position:22.22222222222222% 55.55555555555556%}
.unit.u53{background-position:33.33333333333333% 55.55555555555556%}
.unit.u54{background-position:44.44444444444444% 55.55555555555556%}
.unit.u55{background-position:55.55555555555556% 55.55555555555556%}
.unit.u56{background-position:66.66666666666666% 55.55555555555556%}
.unit.u57{background-position:77.77777777777777% 55.55555555555556%}
.unit.u58{background-position:88.88888888888889% 55.55555555555556%}
.unit.u59{background-position:100% 55.55555555555556%}
.unit.u60{background-position:0% 66.66666666666666%}
.unit.u61{background-position:11.11111111111111% 66.66666666666666%}
.unit.u62{background-position:22.22222222222222% 66.66666666666666%}
.unit.u63{background-position:33.33333333333333% 66.66666666666666%}
.unit.u64{background-position:44.44444444444444% 66.66666666666666%}
.unit.u65{background-position:55.55555555555556% 66.66666666666666%}
.unit.u66{background-position:66.66666666666666% 66.66666666666666%}
.unit.u67{background-position:77.77777777777777% 66.66666666666666%}
.unit.u68{background-position:88.88888888888889% 66.66666666666666%}
.unit.u69{background-position:100% 66.66666666666666%}
.unit.u70{background-position:0% 77.77777777777777%}
.unit.u71{background-position:11.11111111111111% 77.77777777777777%}
.unit.u72{background-position:22.22222222222222% 77.77777777777777%}
.unit.u73{background-position:33.33333333333333% 77.77777777777777%}
.unit.u74{background-position:44.44444444444444% 77.77777777777777%}
.unit.u75{background-position:55.55555555555556% 77.77777777777777%}
.unit.u76{background-position:66.66666666666666% 77.77777777777777%}
.unit.u77{background-position:77.77777777777777% 77.77777777777777%}
.unit.u78{background-position:88.88888888888889% 77.77777777777777%}
.unit.u79{background-position:100% 77.77777777777777%}
.unit.u80{background-position:0% 88.88888888888889%}
.unit.u81{background-position:11.11111111111111% 88.88888888888889%}
.unit.u82{background-position:22.22222222222222% 88.88888888888889%}
.unit.u83{background-position:33.33333333333333% 88.88888888888889%}
.unit.u84{background-position:44.44444444444444% 88.88888888888889%}
.unit.u85{background-position:55.55555555555556% 88.88888888888889%}
.unit.u86{background-position:66.66666666666666% 88.88888888888889%}
.unit.u87{background-position:77.77777777777777% 88.88888888888889%}
.unit.u88{background-position:88.88888888888889% 88.88888888888889%}
.unit.u89{background-position:100% 88.88888888888889%}
.unit.u90{background-position:0% 100%}
.unit.u91{background-position:11.11111111111111% 100%}
.unit.u92{background-position:22.22222222222222% 100%}
.unit.u93{background-position:33.33333333333333% 100%}