body { margin: 0; overflow: hidden; font-family: sans-serif; }
canvas { display: block; }
/* Loading overlay and messages */
#loadingOverlay {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  background: black;
  z-index: 1000;
}
/* Message styles */
#congrats, #wtwMessage, #winMessage, #errorMessage {
  position: absolute;
  width: 100%; text-align: center;
  pointer-events: none; z-index: 1010;
}
#congrats {
  top: 40%; font-size: 2em; color: gold;
  text-shadow: 2px 2px 5px #000; display: none;
}
#wtwMessage {
  top: 10%; font-size: 1.5em; color: limegreen;
  text-shadow: 1px 1px 3px #000; display: none;
}
#winMessage {
  top: 50%; font-size: 2em; color: limegreen;
  text-shadow: 2px 2px 5px #000; display: none;
}
#errorMessage {
  top: 30%; font-size: 1.5em; color: red;
  text-shadow: 2px 2px 5px #000; display: none;
}
/* NEW: Objective Message */
#objectiveMessage {
  position: absolute;
  top: 5%;
  width: 100%;
  text-align: center;
  font-size: 1.5em;
  color: yellow;
  text-shadow: 2px 2px 5px #000;
  z-index: 1010;
}
/* NEW: Treasure Indicator (chest icon) */
#treasureIndicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  background: sienna;
  display: none;
  z-index: 1010;
}
/* NEW: Win Indicator (green circle) */
#winIndicator {
  position: absolute;
  top: 5px;
  left: calc(50% + 20px);
  width: 20px;
  height: 20px;
  background: limegreen;
  border-radius: 50%;
  display: none;
  z-index: 1010;
}
/* Navigation controls */
#bottom-controls {
  position: absolute; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; gap: 10px; z-index: 1010;
}
.control-row {
  display: flex; justify-content: center; gap: 10px;
}
#bottom-controls button {
  position: relative;
  background: rgba(0,0,0,0.5);
  border: none; border-radius: 5px;
  width: 60px; height: 60px;
  cursor: pointer; outline: none; padding: 0;
}
#bottom-controls svg { width: 100%; height: 100%; display: block; }
.key-label {
  position: absolute; bottom: 2px; right: 2px;
  font-size: 10px; color: white; opacity: 0.8;
  pointer-events: none;
}
/* NEW: Alternative key label in the bottom left */
.alt-key-label {
  position: absolute;
  bottom: 2px;
  left: 2px;
  font-size: 10px;
  color: white;
  opacity: 0.8;
  pointer-events: none;
}