#stop-button {
  position: absolute;
  top: 92%;
  left: 5%;
  width: 80px;
  height: 80px;
  z-index: 5;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-image: url('../images/Button_Circle_MysteryJournal.webp');
  cursor: pointer;
  border: none;
  padding: 0;
  display: none;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#stop-button .conversation-button-icon {
  position: absolute;
  top: 40%;
  left: 50%;
  height: 46%;
  width: 46%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 100%;
  background-image: url('../images/Icon_arrow.webp');
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#stop-button .conversation-button-text {
  position: absolute;
  top: 88%;
  left: 50%;
  height: 50%;
  width: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: AvenirLTStd-Roman;
  text-align: center;
  z-index: 2;
  color: white;
  font-size: 14px;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ghost-name-box {
  position: fixed;
  padding: 6px 0;
  top: 14%;
  left: 28%;
  width: 50%;
  height: auto;
  aspect-ratio: 796/183;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('../images/Paper_answer_blue.webp');
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  display: none;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ghost-name-text {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 90%;
  height: auto;
  z-index: 10;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: clamp(16px, 4.2vw, 28px);
  text-align: center;
  color: white;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ghost-subtitles {
  box-sizing: border-box;
  position: fixed;
  padding: 55px 16px;
  top: 60%;
  left: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1179/754;
  /* max-height: 40vh; */
  z-index: 9;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('../images/Paper_dialogue.webp');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center;
  background-color: transparent;
  color: white;
  display: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ghost-text-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: calc(100% - (16px * 2));
  height: auto;
  font-size: clamp(16px, 4.4vw, 24px);
  text-align: center;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#ghost-dialogue-skip {
  position: absolute;
  top: 92%;
  right: 5%;
  width: 80px;
  height: 80px;
  aspect-ratio: 1/1;
  transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  background-image: url("../images/Button_Circle_MysteryJournal.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  /* background-position: center; */
  background-attachment: fixed;
  outline: none;
  border: none;
  border-color: transparent;
  color: white;
  pointer-events: auto;
  z-index: 5;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mic-indicator {
  position: absolute;
  top: 92%;
  left: 50%;
  width: 88px;
  height: 88px;
  aspect-ratio: 1/1;
  z-index: 5;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url("../images/Button_Circle_MysteryJournal.webp");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
  background-position: center;
  background-attachment: fixed;
  outline: none;
  border: none;
  border-color: transparent;
  display: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#mic-indicator .centered-mic-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50%;
  width: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-size: 100%;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hint Sheet Elements */
#hint-sheet-icon {
  position: fixed;
  top: 5%;
  right: 5%;
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  z-index: 15;
  background-image: url('../images/Post_it_Blank_Small.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  display: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#hint-sheet-icon-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: auto;
  -webkit-transform: translate(-50%, -50%) rotate(-8deg);
  -ms-transform: translate(-50%, -50%) rotate(-8deg);
  transform: translate(-50%, -50%) rotate(-8deg);
  font-family: Kalam-Regular;
  font-size: 16px;
  font-weight: bold;
  color: black;
  text-align: center;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#hint-sheet-overlay {
  position: fixed;
  top: 2%;
  left: 50%;
  width: min(320px, 90vw);
  height: auto;
  aspect-ratio: 929/908;
  z-index: 20;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background-image: url('../images/Post_it_Blank_Large.webp');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
  display: none;
  filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.3));
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#hint-sheet-header-text {
  position: absolute;
  top: 8.8%;
  left: 50%;
  width: 86%;
  height: auto;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: Kalam-Bold;
  font-size: clamp(18px, 6.2vw, 28px);
  line-height: 1.1;
  text-align: left;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#hint-sheet-text-container {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 70%;
  height: 70%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: Kalam-Bold;
  font-size: clamp(18px, 6.2vw, 28px);
  line-height: 1.1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#hint-sheet-close-icon {
  position: absolute;
  top: 2%;
  right: 8%;
  font-family: AvenirLTStd-Roman;
  font-size: 24px;
  font-weight: bold;
  color: #000000;
  cursor: pointer;
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.hint-sheet-topic {
  margin: 2px 0;
  color: black;
}

.hint-sheet-topic-complete {
  color: red;
  text-decoration: line-through;
}

/* Speech Recognition Debug Display */
#speech-debug-container {
  position: fixed;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 600px;
  background-color: rgba(0, 0, 0, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  padding: 15px;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  z-index: 1000;
  display: none;
  pointer-events: none;
}

#speech-debug-content {
  white-space: pre-wrap;
  line-height: 1.5;
}

.debug-label {
  color: #00ff00;
  font-weight: bold;
}

.debug-value {
  color: #ffffff;
}

.debug-none {
  color: #ff6666;
  font-style: italic;
}

.debug-fallback {
  color: #ffff00;
}