:root {
  --color__white: #fff;
  --color__grey: rgba(255, 255, 255, 0.6);
  --color__water: #083c85;
  --color__grass: #4f9c0c;
  --color__passenger: #ff0;
  --color__destination: #00ff11;
  --color__positive: #3eca48;
  --color__negative: #e33c3c;
  --color__debug: rgba(255, 255, 255, 0.136);
}

@font-face {
  font-family: "WindTaxiRegular";
  src: url("../fonts/wind_taxi_regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "WindTaxiBold";
  src: url("../fonts/wind_taxi_bold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: black;
  color: white;
  font-family: "WindTaxiRegular", monospace;
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-block: 5vh;
  min-height: 100vh;
}

h1 {
  font-size: 3em;
  margin: 0;
  font-style: italic;
}

p {
  color: var(--color__grey);
  margin: 5px 0;
}

.version {
  font-size: 0.9em;
}

.instructions {
  margin-top: 1em;
}

#gameContainer {
  position: relative;
  line-height: 0.8;
  margin-top: 1em;
}

/** Game Frame **/

#gameFrame {
  border: 1px solid rgb(116, 116, 116);
  overflow: hidden;
  position: relative;
}

#game {
  font-family: monospace;
  background-color: var(--color__water);
  color: var(--color__grass);
  margin: 0;
  font-size: calc(0.5em + 0.5vh);
}

.player {
  color: rgb(233, 229, 220);
  font-weight: 900;
  display: inline-block;
  transform: scale(2.5);
}

.player.N {
  transform: rotate(-90deg) scale(2.5);
}

.player.E {
  transform: rotate(0deg) scale(2.5);
}

.player.S {
  transform: rotate(90deg) scale(2.5);
}

.player.W {
  transform: rotate(180deg) scale(2.5);
}

.player.NE {
  transform: rotate(-45deg) scale(2.5);
}

.player.SE {
  transform: rotate(45deg) scale(2.5);
}

.player.SW {
  transform: rotate(135deg) scale(2.5);
}

.player.NW {
  transform: rotate(-135deg) scale(2.5);
}

.player.dead {
  color: red;
  transform: scale(2.5);
}

#compass {
  position: absolute;
  margin: 0;
  bottom: 12px;
  right: 10px;
  font-weight: 900;
}

#techInfo {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 0.7em;
  color: var(--color__debug);
}

.passenger {
  display: inline-block;
  transform: scale(1.1);
  color: var(--color__passenger);
  font-weight: 900;
}

.dropoff {
  display: inline-block;
  transform: scale(1.8);
  color: var(--color__destination);
  font-weight: 900;
}

/** Game infos **/

.label {
  font-size: 0.75em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

#gameInfos {
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  position: relative;
}

#gameLeftInfos,
#gameRightInfos {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#gameMiddleInfos {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  display: flex;
  flex-direction: column;
}

#passengersList {
  width: 150px;
  margin-top: 5px;
}

.passenger-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.passenger-name {
  font-style: italic;
}

.passenger-timer {
  font-weight: 900;
  color: var(--color__negative);
  font-size: 1.2em;
}

#fuelContainer,
#moneyContainer {
  display: flex;
  align-items: center;
  gap: 2ch;
}

#fuel,
#money {
  color: var(--color__white);
  font-size: 1.2em;
}

#lessMoney {
  color: var(--color__negative);
}

#moreMoney,
#moreFuel,
.positive {
  color: var(--color__positive);
}

#gameMiddleInfos .label {
  margin-bottom: 0;
}

#mission {
  font-size: 1.2em;
  color: var(--color__white);
  line-height: 1.5em;
}

#mission.game-over {
  color: var(--color__negative);
  font-weight: 900;
}

#finalScore {
  font-size: 1.2em;
  color: var(--color__positive);
  line-height: 1.5em;
}

.action-char-example {
  font-family: monospace;
  display: block;
  border: 1px solid #fff;
  width: 24px;
  height: 24px;
  font-size: 14px;
  line-height: 22px;
  margin: 1.2vh auto;
  transform: none;
}

/** Highscore **/

#highScoreContainer {
  padding-top: 10vh;
  color: var(--color__grey);
}

#bestRatiosContainer {
  padding-top: 2vh;
  color: var(--color__grey);
}

#bestRatios li {
  margin-bottom: 5px;
}