/* Dialogue Vessel: lower-third floating card (level intro and NPC conversations). */

.dialogue {
  position: absolute;
  left: 50%;
  bottom: calc(clamp(1rem, 4vh, 3rem) + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  gap: var(--space-xs);
  width: min(44rem, 100% - 2 * var(--margin));
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--glass-3-line);
  border-radius: var(--radius-md);
  background: var(--glass-3);
  box-shadow: var(--glass-3-shadow);
  -webkit-backdrop-filter: var(--glass-3-blur);
  backdrop-filter: var(--glass-3-blur);
  transform: translateX(-50%);
  cursor: pointer;
  user-select: none;
  animation: dialogue-in 0.25s ease-out;
}

.dialogue__speaker {
  margin: 0;
  color: var(--amber);
  font: italic 500 1.25rem/1.75rem var(--font-display);
}

.dialogue__line {
  margin: 0;
  min-height: 3.25rem; /* two lines, so the box doesn't jump between short and long lines */
  color: var(--text-strong);
  font: 400 1rem/1.625rem var(--font-ui);
  text-wrap: pretty;
}

.dialogue__line.is-entering {
  animation: line-in 0.2s ease-out;
}

.dialogue__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-xs);
  color: var(--text-muted);
  font: 700 0.625rem/0.875rem var(--font-ui);
  letter-spacing: var(--tracking-label-sm);
  text-transform: uppercase;
}

.dialogue__hint {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-xs);
}

.dialogue__hint .kbd {
  text-transform: none;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .dialogue {
    padding: var(--space-md);
  }

  .dialogue__line {
    font-size: 0.9375rem;
    line-height: 1.5rem;
  }

  /* Touch screens: the whole card is the button. */
  .dialogue__keys {
    display: none;
  }
}

@keyframes dialogue-in {
  from { opacity: 0; transform: translate(-50%, 0.75rem); }
}

@keyframes line-in {
  from { opacity: 0; transform: translateY(0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue,
  .dialogue__line.is-entering {
    animation: none;
  }
}