path: root/play.css

header { background-color: hsl(39, 25%, 75%); }
#replay_panel { background-color: hsl(39, 25%, 75%);; }

#log { background-color: hsl(50, 50%, 92%); }
#log .h1 { background-color: #803a3c; color: gold; text-shadow: 0 0 1px white; }
#log .h2 { background-color: hsl(45, 30%, 70%); }
#log .h3 { background-color: hsl(45, 30%, 80%); }

body.French header.your_turn { background-color:  hsl(195, 72%, 75%); }
#role_French .role_name { background-color:  hsl(195, 72%, 80%); }
body.Coalition header.your_turn { background-color: white; }
#role_Coalition .role_name { background-color: white; }

.role_vp { float: right; }

#log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; }
#log .h2 { padding-top:1px; padding-bottom:1px; }
#log .h3 { padding-top:1px; padding-bottom:1px; }
#log .h1, #log .h2, #log .h3 { text-align: center; }
#log .h1, #log .h2, #log .h3 { margin: 2px 0; }
#log .h1, #log .h2, #log .h3 { border-top: 1px solid #000a; border-bottom: 1px solid #000a; }

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

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

#log span.french { background-color: hsl(195, 72%, 90%); padding: 0 2px }
#log span.anglo { background-color: white; padding: 0 2px }
#log span.prussian { background-color: gainsboro; padding: 0 2px }

main {
	background-color: dimgray;
}

#mapwrap {
	margin: 0 auto;
	width: 2550px;
	height: 1940px;
}

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

#board, #tracks, #hexes, #pieces {
	position: absolute;
}

#board {
	top: 0px;
	left: 0px;
	width: 2550px;
	height: 1650px;
	background-color: #803a3b;
	background-image: url(images/map75.jpg);
	background-size: 2550px 1650px;
	box-shadow: 0 0 8px #0008;
}

#tracks {
	top: 1670px;
	left: 20px;
	width: 600px;
	height: 250px;
	background-color: #d0c5b1;
	background-size: 600px 250px;
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-image: url(images/tracks75.webp);
	box-shadow: 0 0 8px #0008;
}

@media (min-resolution:97dpi) {
	#board { background-image: url(images/map150.jpg); }
	#tracks { background-image: url(images/tracks150.webp); }
}

#hexes, #pieces, #labels { position: absolute }

.label {
	user-select: none;
	position: absolute;
	text-align: center;
	font-family: "Source Serif SmText";
	font-size: 10px;
	width: 70px;
	line-height: 1em;
	color: black;
	text-shadow: 0 0 2px white;
}

.label.caps {
	font-size: 14px;
	font-variant: small-caps;
}

.label.river {
	font-size: 14px;
	color: #359;
}

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

.hex.action {
	border: 4px solid #fff6;
	background-color: #fff2;
	box-shadow: 0 0 3px #0008;
	z-index: 100;
}

.hex.action.stop {
	background-color: #f002;
}

.hex.move { background-color: #0a04 !important }
.hex.road { background-color: #8804 !important }
.hex.move.stop, .hex.road.stop { background-color: #f006 !important }

.hex.f_range { background-color: #05a6 !important }
.hex.a_range { background-color: #b326 !important }
.hex.p_range { background-color: #8286 !important }

#hexes.p1hq .hex.p1hq { background-color: #05a4 }
#hexes.p2hq .hex.p2hq { background-color: #b324 }

#hexes.p1zoc .hex.p1zoi { background-color: #05a4 }
#hexes.p1zoc .hex.p1zoc { background-color: #05a8 }

#hexes.p2zoc .hex.p2zoi { background-color: #b324 }
#hexes.p2zoc .hex.p2zoc { background-color: #b328 }

.large {
	position: absolute;
	background-size: 84px auto;
	width: 42px;
	height: 42px;
}

.small {
	position: absolute;
	background-size: 34px auto;
	width: 34px;
	height: 34px;
}

.large, .small {
	transition-property: top, left;
	transition-duration: 500ms;
	transition-timing-function: ease;
	border-width: 2px;
	border-style: solid;
	box-shadow: 0 0 0 1px #444, 0 0 4px #0008;
}

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

.large.selected, .small.selected {
	box-shadow: 0 0 0 1px #444, 0 0 0 3px mediumblue;
}

.large.target, .small.target {
	box-shadow: 0 0 0 1px #444, 0 0 0 3px black;
}

.large.support, .small.support {
	box-shadow: 0 0 0 1px #444, 0 0 0 3px green;
}

.large.selected.action, .small.selected.action {
	box-shadow: 0 0 0 1px #444, 0 0 0 3px mediumblue, 0 0 0 5px white;
}

.large.target.action, .small.target.action {
	box-shadow: 0 0 0 1px #444, 0 0 0 3px black, 0 0 0 6px white;
}

.hex.tip {
	border: 5px solid yellow;
	z-index: 200;
}

div.french.tip, div.anglo.tip, div.prussian.tip {
	box-shadow: 0 0 0 4px yellow;
	z-index: 200;
}

#arrow {
	opacity: 80%;
	position: absolute;
	top: 1559px;
	left: 36px;
	width: 50px;
	z-index: 300;
	pointer-events: none;
	height: 50px;
	background-size: cover;
	background-image: url(images/arrow.svg);
	transform-origin: 25px 50px;
	filter: drop-shadow(0 0 3px white);
}

#arrow.r0 { transform: rotate(30deg) }
#arrow.r1 { transform: rotate(90deg) }
#arrow.r2 { transform: rotate(150deg) }
#arrow.r3 { transform: rotate(210deg) }
#arrow.r4 { transform: rotate(270deg) }
#arrow.r5 { transform: rotate(330deg) }

.marker { border-color: hsl(199,65%,85%) hsl(199,55%,50%) hsl(199,55%,50%) hsl(199,65%,85%) }
.large.french, .small.french { border-color: hsl(199,85%,90%) hsl(199,75%,70%) hsl(199,75%,70%) hsl(199,85%,90%) }
.large.anglo, .small.anglo { border-color: hsl(0,0%,90%) hsl(0,0%,70%) hsl(0,0%,70%) hsl(0,0%,90%) }
.large.prussian, .small.prussian { border-color: hsl(202,10%,70%) hsl(202,10%,50%) hsl(202,10%,50%) hsl(202,10%,70%) }

.large.french { background-image: url(images/sheet_french1_75.webp) }
.large.anglo { background-image: url(images/sheet_anglo1_75.webp) }
.large.prussian { background-image: url(images/sheet_prussian1_75.webp) }
.large.marker { background-image: url(images/sheet_misc_75.webp) }
.small.french { background-image: url(images/sheet_french2_75.webp) }
.small.anglo { background-image: url(images/sheet_anglo2_75.webp) }
.small.prussian { background-image: url(images/sheet_prussian2_75.webp) }

@media (min-resolution:97dpi) {
.large.french { background-image: url(images/sheet_french1_150.webp) }
.large.anglo { background-image: url(images/sheet_anglo1_150.webp) }
.large.prussian { background-image: url(images/sheet_prussian1_150.webp) }
.large.marker { background-image: url(images/sheet_misc_150.webp) }
.small.french { background-image: url(images/sheet_french2_150.webp) }
.small.anglo { background-image: url(images/sheet_anglo2_150.webp) }
.small.prussian { background-image: url(images/sheet_prussian2_150.webp) }
}

.large.y1 { background-position: -0px -0px }
.large.y2 { background-position: -0px -42px }
.large.y3 { background-position: -0px -84px }
.large.y4 { background-position: -0px -126px }
.large.y5 { background-position: -0px -168px }
.large.y6 { background-position: -0px -210px }
.large.y7 { background-position: -0px -252px }
.large.y8 { background-position: -0px -294px }
.large.y9 { background-position: -0px -336px }
.large.y10 { background-position: -0px -378px }
.large.y11 { background-position: -0px -420px }

.large.flip.y1 { background-position: -42px -0px }
.large.flip.y2 { background-position: -42px -42px }
.large.flip.y3 { background-position: -42px -84px }
.large.flip.y4 { background-position: -42px -126px }
.large.flip.y5 { background-position: -42px -168px }
.large.flip.y6 { background-position: -42px -210px }
.large.flip.y7 { background-position: -42px -252px }
.large.flip.y8 { background-position: -42px -294px }
.large.flip.y9 { background-position: -42px -336px }
.large.flip.y10 { background-position: -42px -378px }
.large.flip.y11 { background-position: -42px -420px }

.small.y1 { background-position: 0px 0px }
.small.y2 { background-position: 0px -34px }
.small.y3 { background-position: 0px -68px }
.small.y4 { background-position: 0px -102px }
.small.y5 { background-position: 0px -136px }
.small.y6 { background-position: 0px -170px }

#log .dice {
	display: inline-block;
	vertical-align: -3px;
	width: 12px;
	height: 12px;
	background-size: 600% 100%;
	background-repeat: no-repeat;
	background-image: url(images/die_black_pips.svg);
	background-color: gold;
	border: 1px solid black;
}

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