body {
  user-select: none;
  background-color: #d7d7d7;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: #434343;
}

.button {
  background-color: #ffffff;
  color: #363636;
  padding: 7px 25px;
  text-align: center;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  border: 0;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
}

.button:disabled {
  color: #9a9a9a;
  cursor: default;
}

#splash-container {
  width: 100%;
  padding-top: 50px;
}

#grey-bar {
  width: 100%;
  height: 55px;
  margin-top: 30px;
  background-color: #434343;
}

#panel {
  max-width: 520px;
  margin: 30px auto 0;
  padding: 0 16px;
  text-align: center;
}

#progress-bar-container {
  position: relative;
  height: 20px;
}

#progress-bar-outline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 20px;
  border: 3px solid #626262;
}

#progress-bar {
  position: absolute;
  left: 5px;
  right: 5px;
  top: 5px;
  bottom: 5px;
  background-color: #FFFFFF;
  z-index: 0;
  border-radius: 20px;
}

#loading-text {
  margin-top: 10px;
  font-weight: bold;
  font-size: 16px;
}

#code-panel {
  margin-top: 24px;
  font-size: 15px;
}

#code-panel label {
  display: block;
  font-weight: bold;
  margin-bottom: 8px;
}

#code-panel .row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

#code-input {
  flex: 1;
  max-width: 260px;
  padding: 6px 10px;
  font-size: 16px;
  border: 2px solid #626262;
  font-family: inherit;
  user-select: text;
}

#code-panel .or {
  margin: 10px 0;
}

#code-message {
  min-height: 1.4em;
  margin-top: 12px;
  font-size: 14px;
}

#code-message.error {
  color: #a3171d;
  font-weight: bold;
}

#play-prompt {
  display: none;
  margin-top: 24px;
}

#code-banner {
  font-size: 16px;
  margin-bottom: 12px;
}

#code-banner b {
  font-size: 28px;
  display: block;
  letter-spacing: 1px;
  user-select: text;
}

/* Recess build: the makers and the licence, small, in the grey band under the logo. The band grows to fit
   the text on narrow screens, and stays above the Play button in the page's flow, so it never covers it. */
#grey-bar {
  height: auto;
  min-height: 55px;
  box-sizing: border-box;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#credit {
  margin: 0;
  max-width: 860px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  color: #d7d7d7;
  user-select: text;
}

canvas {
  width: 100%;
  height: 100%;
}

#game-container {
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  right: 0;
  visibility: hidden;
}

/* The player's code, shown over the game's bottom letterbox once it's running. */
#code-tag {
  display: none;
  position: fixed;
  left: 10px;
  bottom: 8px;
  font-size: 12px;
  color: #ffffff;
  opacity: 0.8;
  pointer-events: none;
}