@font-face {
  font-family: myFont;
  src: url("../assets/boldpixels/BoldPixels.ttf");
}

html,
body {
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background-color: #271e32;
  background-repeat: repeat;
  margin: 0;
  display: flex;

  /* Center sketch horizontally. */
  justify-content: center;

  /* TCenter sketch vertically. */
  align-items: center;
}

/* Game frame container with decorative panels */
.game-frame {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  min-height: 100vh;
  width: 100%;
}

/* P5.js container */
#p5-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Style canvas when it's inside p5-container */
#p5-container canvas {
  display: block;
}

/* Left decorative panel */
.left-panel {
  width: 480px;
  align-self: stretch;
  background-image: url("../assets/UI/panel-2.png");
  background-repeat: repeat;
  flex-shrink: 0;
  display: none;
  overflow: hidden;
}

/* Right decorative panel */
.right-panel {
  width: 480px;
  align-self: stretch;
  background-image: url("../assets/UI/panel-2.png");
  background-repeat: repeat;
  flex-shrink: 0;
  display: none;
  overflow: hidden;
}

/* Show panels on screens 1280px and wider */
@media (min-width: 1280px) {
  .left-panel {
    display: block;
  }
  .right-panel {
    display: block;
  }
}

/* Use panel-3 during name input screen */
body.nameInput-active .left-panel {
  background-image: url("../assets/UI/panel-3.png");
}

body.nameInput-active .right-panel {
  background-image: url("../assets/UI/panel-3.png");
}

/* Use panel-5 during rain ending sequence */
body.rain-active .left-panel {
  background-image: url("../assets/UI/panel-5.png");
}

body.rain-active .right-panel {
  background-image: url("../assets/UI/panel-5.png");
}
input[type="text"],
textarea {
  background-color: rgb(20, 7, 36);
  color: rgb(255, 253, 191);
  border: 4px solid rgb(224, 160, 80);
  border-radius: 15px;
  text-align: center;
  font-family: myFont;
}

/* Custom p5.js loading screen styling */
#p5_loading {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  color: rgb(255, 253, 191) !important;
  font-family: myFont, monospace !important;
  font-size: 24px !important;
  width: 100% !important;
  height: 100% !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}