added win popup

src/less/popup.less

@@ -1,14 +1,15 @@
 @keyframes popupAppear {
 	0% {
-		background: transparent;
+		background: rgba(0, 0, 0, 0%);
 	}
 	100% {
-		background: black;
+		background: rgba(0, 0, 0, 90%);
 	}
 }
 
 .popup {
-	animation: popupAppear 1s linear no-repeat;
+	animation: popupAppear 1s linear;
+	background: rgba(0, 0, 0, 90%);
 
 	position: absolute;
 	top: 0;
@@ -18,12 +19,80 @@
 
 	.content {
 		border-radius: 2rem;
-		background: @accentbg;
+		background: @bg;
 		text-align: center;
+		box-shadow: black 0 0 1rem;
 
-		postion: absolute;
+		position: absolute;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%);
+		box-sizing: border-box;
+
+		max-width: 50vw;
+		max-height: 50vh;
+
+		padding: 2rem;
+		display: flex;
+		flex-direction: column;
+
+		font-size: 1.4rem;
+
+		& > section {
+			margin: 1rem;
+
+			&:first-of-type {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				& > * {
+					margin: .5rem;
+				}
+			}
+
+			&:last-of-type {
+				display: flex;
+
+				& > * {
+					flex: 1;
+				}
+			}
+		}
+
+		table {
+			display: flex;
+			flex-direction: column;
+			width: 100%;
+
+			tr {
+				display: flex;
+			}
+			th {
+				text-align: right;
+				&::after {
+					content: ':';
+				}
+			}
+			td {
+				text-align: left;
+			}
+			th, td {
+				padding: 0 .5rem;
+				flex: 1;
+			}
+		}
+
+		button {
+			display: inline;
+			color: @accentfg;
+			background: @accentbg;
+			font-weight: bold;
+
+			border-radius: 1rem;
+			border: 0;
+			padding: 2rem;
+			margin: 1rem;
+		}
 	}
 }