body {
  background-color: #eee;

  font-family: "IM Fell DW Pica", serif;
  font-weight: 400;
  font-style: normal;
  /*font-style: italic;*/

  user-select: none;
}

#cover-image {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 960px;
  height: 540px;
  background-color: #BF785F;
  color: #361B2D;

  font-family: "IM Fell DW Pica", serif;
  font-weight: 400;
  font-style: normal;
  text-align: center;

  cursor: pointer;
}

#cover-image #main-title {
  font-size: 40px;
  margin-top: 190px;
}
#cover-image #loader {
  font-size: 20px;
  margin-top: 25px;
}

canvas {
  /*
  // We must not have any background colour, otherwise the layered secondary canvas would cover the main.
  background-color: rgb(16, 124, 132);
  */
  border: 1px solid rgb(0, 0, 0);
}

canvas:first-child {
  background-color: rgb(84 108 110);
}

#main-canvas, #secondary-canvas {
  position: absolute;
  left: 0;
  top: 0;
}

#debug-container {
  position: absolute;
  top: 510px;
}

#header {
  position: absolute;
  margin: 5px;
  width: 960px; /* TODO: make width-agnostic or follow WIDTH */
}

#header #inventory .slot {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  outline: 1px solid #361B2D;
}

#header #inventory .slot.filled {
  background-color: #361B2D;
}

#header #score {
  position: absolute;
  right: 16px;
  top: 4px;
}

#merchant-screen {
  position: absolute;
  top: 210px;
  left: 225px;
  width: 500px;

  border-radius: 8px;
  padding: 6px;

  background: gray;
  user-select: none;
}

#merchant-screen #upgrades-list {
  padding-top: 20px;
}

#merchant-screen #upgrades-list .upgrade {
  line-height: 28px;
  padding: 5px;
  display: flex;
}
#merchant-screen #upgrades-list .upgrade:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}

#merchant-screen #upgrades-list .upgrade .price {
  margin-left: auto;
  padding-right: 6px;
}

#merchant-screen #upgrades-list .upgrade .button {
  padding: 4px 15px;
  margin-top: -4px;
}
#merchant-screen #upgrades-list .upgrade .button:hover {
  cursor: pointer;
  background-color: rgba(1, 1, 1, 0.3);
}

#merchant-screen #upgrades-list .upgrade .price {
  right: 50px;
}

.notification-msg {
  position: absolute;
  color: #361B2D;
  text-shadow: 0px 0px 2px white;
}

.finale-msg {
  position: absolute;
  padding: 20px;
  border-radius: 8px;
  background: gray;
  top: 100px;
  left: 125px;
}

.finale-msg.shifted {
  left: 380px;
}