:root {
	--wall: #832121;
	--m-wall: #6b1b1b;
	--d-wall: #541313;
	--lines: #330d0d;
	--black: black;
	--white: white;
	--red: #bf0000;
	--blue: #363959;
	--yellow: #bf0000;
	--gray: #703b3b;
	--l-gray: #e6dcdc;
	--pink: #c39797;
	--nepeta: #416600;
	
	--border: 5px var(--lines) solid;
}

body {
	margin: 0;
	font-family: Courier, monospace;
	text-align: center;
	background: var(--d-wall);
	font-weight: bold;
}

img { image-rendering: pixelated; }
img.flip { transform: scale(-100%,100%); }

main {
	position: relative;
	background: var(--wall);
	padding: 2.5rem 10px 5rem 10px;
	max-width: 970px;
	border: min(40px,5vw) var(--m-wall) solid;
	border-top: none; border-bottom: none;
	margin: 0 auto;
	img { max-width: 100%; user-select: none; pointer-events: none; }
}

img.side-decor {
	position: absolute;
	@media screen and (width < 1150px) { display: none; }
}

section#ship-squares {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	justify-content: center;
	padding: 0 15px;
	max-width: 940px;
	margin: 0 auto;
	
	.ship {
		margin-top: 1rem;
		position: relative;
		--size: 175px;
		width: var(--size);
		height: var(--size);
		
		padding: 0;
		
		&:before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0; left: 0;
			z-index: 2;
			background-repeat: no-repeat;
		}
		
		&:nth-child(n):before { background-image: url('images/ship_square_1.png'); }
		&:nth-child(2n):before { background-image: url('images/ship_square_2.png'); }
		&:nth-child(3n):before { background-image: url('images/ship_square_3.png'); }
		&:nth-child(4n):before { transform: rotate(90deg); }
		&:nth-child(5n):before { transform: rotate(180deg); }
		&:nth-child(6n):before { transform: rotate(90deg); }
		
		&:hover, &:active, &:focus, &:focus-visible, &.cur-ship {
			background-image: url('images/ship_square_highlight.png');
		}
		&:focus-visible { outline: none; }
		&:active, &:focus, &:focus-visible, &.cur-ship { &:after {
			content: "";
			position: absolute;
			width: 215px;
			height: 207px;
			top: 50%; left: 50%; transform: translate(-50%,-50%);
			z-index: 5;
			background-repeat: no-repeat;
			background-image: url('images/ship_square_circle.png');
		} }
		
		/* icon at top of square */
		.icons {
			position: absolute;
			z-index: 6;
			width: 100%;
			top: 0; transform: translateY(-48%);
			user-select: none;
			img { width: 25%; }
		}
		
		.content {
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			img:nth-child(1) { margin-left: 12px; }
			img:nth-child(2), img:nth-child(3) { margin-left: -12px; }
		}
		
		&.triad .content {
			img { max-width: 85px; }
			img:nth-child(1) { margin-left: 10%; }
			img:nth-child(2), img:nth-child(3) { margin-left: -15%; }
		}
	}
}

/* ship description popup */
section#ship-description {
	position: fixed;
	z-index: 100;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	width: min(90vw,500px);
	height: auto;
	min-height: min(8em,80vh);
	background: var(--l-gray);
	color: var(--nepeta);
	border: var(--border);
	padding: 1em;
	
	pre.description {
		font-family: inherit; font-weight: inherit; color: inherit; font-size: inherit;
		text-align: center;
		width: 100%;
		tab-size: 0px;
		white-space: pre-wrap;
		word-break: break-word;
		line-height: 1.25;
		margin: 0;
		
		a, a:link, a:visited { color: var(--red); }
		a:hover { color: var(--pink); }
	}
	
	.icon {
		max-height: 1em;
    max-width: 1em;
    margin-bottom: -.2em;
		padding: 0 .15em;
	}
	
	button.close {
		background: var(--black);
		color: var(--red);
		font-size: 1.25rem;
		padding: .25em .5em;
		margin-top: 1em;
		
		&:hover, &:focus-visible { background: var(--red); color: var(--black); }
		&:focus-visible {
			outline: 3px var(--black) solid;
			box-shadow: 0 0 0 5px var(--wall);
		}
	}
}

/* main navigation */
nav {
	position: fixed;
	z-index: 1001;
	bottom: 0;
	width: 100%;
	padding: 1rem .5rem;
	background: var(--black);
	color: var(--pink);
	font-size: 1.5rem;
	font-weight: bold;
	display: flex;
	justify-content: center;
	gap: 1.5em;
	a {
		&:visited, &:link {
			color: inherit;
		}
		&:hover {
			color: var(--red);
		}
	}
}

/* page settings */
.page-settings {
	--open-button-fill: var(--pink);
	--open-button-background: var(--black);
	--background: var(--black);
	--color: var(--pink);
	--accent: var(--white);
}