html {
	height: 100%;
}

body {
	background-color: black;
	color: orange;
	font-family: monospace;
	font-weight: bolder;
	/* Need to fit the game into the window without overflow.
	Namely, adjust top and bottom of the screen */
	overflow: hidden;
}

header {
	text-align: center;
}

h1 {
	letter-spacing: 10px;
	margin-bottom: 0;
}

h2, h3 {
	text-align: center;
}

.left-window {
	border-right: 2px solid orange;
	width: fit-content;
	padding: 0px 10px 10px;
	float: left;
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 1;
	grid-row-end: 5;
	text-align: left;
	display: none;
}

ul.left-window-list {
	padding-left: 20px;
	list-style-type: square;
}

.left-window-list > li {
	padding-bottom: 5px;
}

#extended-stats {
	display: none;
	grid-row-start: 1;
	grid-row-end: 2;
	grid-column-start: 2;
	grid-column-end: 3;
	
	padding: 10px 5px;
}

#main {
	height: -webkit-fill-available; /* Chrome vertical centering */
	height: -moz-available; 		/* Firefox vertical centering */
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#game {
	display: grid;
	grid-gap: 0px 0px;
	
	/* Center game board */
	margin: auto;
	text-align: center;
	line-height: 100%;
	
	/* Text style */
	font-family: monospace;
	font-weight: bolder;
	font-size: 1.5em;
	
	border: 2px solid orange;
    border-radius: 4px;
	
	max-width: fit-content;
	
}

#stats {
	grid-row-start: 2;
	grid-row-end: 3;
	grid-column-start: 2;
	grid-column-end: 3;
	
	padding: 10px 5px;
}

.game-stats {
	padding-left: 5px;
	float: left;
		
}

.player-stats {
	float: right;
}

.stat {
	padding: 5px;
}

#game-board-wrapper {
  position: relative;
  grid-row-start: 3;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  width: 100%;
  height: 100%;
}

.board-cover {
	display: none;
	background: black;
	width: 100%; 
	height: 50%; 
	position: absolute;
	z-index: 2;
	animation-name: blink;
	animation-duration: 3s;
	animation-timing-function: ease-in;
	animation-fill-mode: forwards;
}

@keyframes blink {
	from {
		height: 50%;
	}
	to {
		height: 30%;
	}
}

@keyframes open-wide {
	from {
		height: 30%;
	}
	to {
		height: 0%;
		display: none;
	}
}

#game-board-top {
	top: 0px;
	left: 0px;
}

#game-board-bottom {
	bottom: 0px;
	left: 0px;
}
  
#game-board {
	position: relative;
	z-index: 1;
	margin: auto;
	left: 0px;
	top: 0px;
}

.fire {
  animation-name: burn;
  animation-duration:0.095s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes burn {
	from {
		transform: rotateY(0deg) scale(1, 1);
	}
	to {
		transform: rotateY(180deg) scale(1.2, 1.5);
	}
}

.water {
	animation-name: tide;
  	animation-duration:0.7s;
  	animation-timing-function: linear;
  	animation-iteration-count: infinite;
  	animation-direction: alternate;
  	transform-origin: center left;
}

@keyframes tide {
	from {
		transform: scale(1, 1);
	}
	to {
		transform: scale(1.2, 1);
	}
}



p.stat {
	float: left;
}

.tileline {
	height: 24px;
}

.tileline > span {
	height: 24px;
	width: 24px;
	float: left;
}

/* TODO: use SASS for loop for this */
/* Perform a rotation of 90 degrees anti-clockwise */
@keyframes rotate90 {
	0% {
		transform: skewX(0deg);
	}
	10% {
		transform: skewX(9deg);
	}
	20% {
		transform: skewX(18deg);
	}
	40% {
		transform: skewX(36deg);
	}
	60% {
		transform: skewX(54deg);
	}
	80% {
		transform: skewX(72deg);
	}
	100%{
		transform: skewX(90deg);
	}
}

#game-log {
	grid-row-start: 4;
	grid-row-end: 5;
	grid-column-start: 2;
	grid-column-end: 3;
	width: 100%;
}

#log {
	color: orange;
	float: left;
	width: 100%;
	height: 6em;
	resize: none;
	box-sizing: border-box;
    border-top: 2px solid orange;
	border-bottom: 0px;
	border-right: 0px;
	border-left: 0px;
    background-color: black;
	font-size: 1em;
	padding-left: 5px;
	outline: none;
	-webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

::-webkit-scrollbar {
    width: 12px;
}
 
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: orange; 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: orange; 
}

#inventory {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 5;
	width: fit-content;
	padding: 0px 10px;
	border-left: 2px solid orange;
	display: none;
}

.inv-list {
	list-style-type: decimal;
	text-align: left;
}
.inv-list > li {
	padding-bottom: 5px;
}

a:link, a:visited {
	text-decoration: none;
	color: orange;
}
a:hover {
	text-decoration: underline;
	color: orange;
}
a:active {
	color: white;
}

footer {
	position: fixed;
	bottom: 0;
	padding: 10px;
	
	font-size: 1.2em;
	
	width: 100%;
	width: -webkit-fill-available;
	width: -moz-available;
}

.footer-links {
	padding: 10px;
}

.footer-right {
	float: right;
}

.footer-left {
	float: left;
}

#speaker-emoji {
	vertical-align: top;
}

#cinematic-control-container {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 5;
	grid-row-end: 6;
	border-top: 2px solid orange;
	padding: 10px;
	display: none;
}

#skip-cinematic {
	display: none;
}

#conversation-progress-bar {
	display: none;
	background-color: orange;
	text-align: center;
  	color: black;
}

#o1330 {
	z-index: 2;
	-webkit-animation: none;
}

/* City wall corners symmetry */
#o0327, #o1404 {
	transform: scaleX(-1);
}

@-webkit-keyframes glitter {
  0% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
  25% {
    -webkit-transform: scale(0.85) rotate(360deg);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(0.3) rotate(720deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(0.3) rotate(0deg);
    opacity: 0;
  }
}

#world-map-wrapper {
    display: none; 
    position: fixed; 
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%; 
   
	background-color: rgba(0,0,0,0.4);
	height: -webkit-fill-available; /* Chrome vertical centering */
	height: -moz-available; 		/* Firefox vertical centering */
	display: flex;
	visibility: hidden;
	flex-direction: column;
	justify-content: center;
}

#world-map {
	position: relative;
	display: grid;
	grid-gap: 5% 0;
    background-color: black;
    border: 2px solid orange;
    border-radius: 4px;

    padding: 5vh 5vh;
	width: 50%; 
	margin: auto;
	text-align: center;
	line-height: 100%;
	
}

#world-map-title {
	font-size: 2vw;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 1;
	grid-row-end: 2;
	margin: 0;
}

#world-map-subtitle {
	font-size: 1vw;
	grid-column-start: 1;
	grid-column-end: 4;
	grid-row-start: 2;
	grid-row-end: 3;
	margin: 0;
	padding-bottom: 2vh;
}

/* World map zones */
.zone {
	position: relative;
	width: 15vw;
    height: 7.5vh;
    background: gray;
    color: black;
    text-align: center;
	vertical-align: middle;
	line-height: 7.5vh;
	font-size: 1.5vw;
}

#crash_site {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 4;
	grid-row-end: 5;
}

#beach {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 3;
	grid-row-end: 4;
}

#plains {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 4;
	grid-row-end: 5;
}

#lake {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 3;
	grid-row-end: 4;
}

#alien_city {
	grid-column-start: 3;
	grid-column-end: 4;
	grid-row-start: 4;
	grid-row-end: 5;
}

.you_are_here {
	position: absolute;
	line-height: 0;
	top: 1vw;
	right: 1vw;
	color: red;
	font-size: 2vw;
}

.unknown_zone {
	color: black;
	font-size: 2vw;
}