.dialogue-panel {
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  min-height: 164px;
  padding: 16px 58px 16px 16px;
  border: 1px solid rgba(243, 238, 226, 0.42);
  border-left: 4px solid var(--brick);
  border-radius: 3px;
  background: rgba(20, 22, 19, 0.86);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  color: #f3eee2;
}

.dialogue-panel.is-ending {
  min-height: 196px;
  border-top: 1px solid rgba(243, 238, 226, 0.42);
  border-left-color: var(--mustard);
  background: rgba(20, 22, 19, 0.9);
}

.speaker-line strong {
  color: #e7c878;
}

.speaker-line span {
  color: #c5c1b7;
}

.frame-title,
.dialogue-text {
  color: #f5f1e8;
}

.dialogue-text {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
}

.advance-button {
  right: 12px;
  bottom: 12px;
  border-color: #d1a94e;
  background: var(--brick);
}

.mood-portrait {
  bottom: calc(184px + env(safe-area-inset-bottom));
}

.choice-panel {
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 12px;
  max-height: 54%;
  border: 1px solid rgba(243, 238, 226, 0.42);
  border-left: 4px solid var(--mustard);
  border-radius: 3px;
  background: rgba(20, 22, 19, 0.9);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

@media (max-height: 690px) {
  .dialogue-panel {
    bottom: calc(8px + env(safe-area-inset-bottom));
    min-height: 144px;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .mood-portrait {
    bottom: calc(160px + env(safe-area-inset-bottom));
  }

  .choice-panel {
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
}