:root {
	--mapw: 900;
	--maph: 600;
}

* {
    box-sizing: border-box;

    padding: 0;
    margin: 0;
}

body {
    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;

    background-color: black;
}

.game {
    --w: min(100vw, 100vh * var(--mapw) / var(--maph));
    --h: min(100vh, 100vw * var(--maph) / var(--mapw));
    
	position: absolute;
	background-color: lightgray;
	width: var(--w);
	height: var(--h);

	overflow: hidden;
}

.game > * {
	--x: 0;
	--y: 0;
	--w: 0;
	--h: 0;
    --rw: calc(100% * var(--w) / var(--mapw));
    --rh: calc(100% * var(--h) / var(--maph));
	--c: black;

	position: absolute;
	background-color: var(--c);
	top: calc(100% * var(--y) / var(--maph));
	left: calc(100% * var(--x) / var(--mapw));
	width: var(--rw);
	height: var(--rh);
}

.unit {
    --r: 100;
    --w: var(--r);
	--h: var(--r);
    --c: limegreen;

    border-radius: 50px;
}
.unit.dead {
	background-color: #ff000000;
	border: 2px dashed var(--c);
}

.selection {
	--c: red;
	background-color: #ff000000;
	border: 2px dashed #00000050;
	
}
.description {
	position: relative;
	width: 8rem;
	font: 1.1em sans-serif;
	z-index: 10;
}

.description.align-right {
	right: -100%;
	top: 25%;
}
.description.align-left {
	left: -120%;
	top: -50%;
}
.description.align-bottom {
	bottom: -100%;
	left: 25%;
	text-align: center;
}

.selection:hover {
	border: 2px dashed var(--c);
}
.selection:hover p {
	display: block;
}

a {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hide {
	display: none;
}

.unit, .selection {
	display: none;
}

.s1 {
	display: block;
}