:root {
  --panel-background: rgb(7 10 28 / 52%);
  --panel-background-strong: rgb(7 10 28 / 64%);
  --panel-border: rgb(255 255 255 / 18%);
  --panel-shadow: 0 20px 60px rgb(0 0 0 / 34%);
  --background-overlay-top: rgb(3 5 18 / 22%);
  --background-overlay-bottom: rgb(3 5 18 / 48%);
}

/* Transparent colors preserve full opacity for text, controls, photos, and icons. */
.veil,
.letter-overlay {
  background: linear-gradient(
    180deg,
    var(--background-overlay-top),
    var(--background-overlay-bottom)
  );
}

.card,
.letter-card {
  background: var(--panel-background);
  border-color: var(--panel-border);
  box-shadow: var(--panel-shadow), inset 0 1px rgb(255 255 255 / 10%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#journey,
.tray,
.password-hint,
#decrypt {
  background: var(--panel-background);
  border: 1px solid var(--panel-border);
  box-shadow: 0 10px 30px rgb(0 0 0 / 22%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

#journey { border-radius: 18px; padding-block: .45rem; }
.tray { width: max-content; padding: .3rem .7rem; border-radius: 999px; }
.password-hint, #decrypt { border-radius: 16px; padding: .8rem 1rem; }

.music button,
.music-controls button,
.quiet,
.dpad button,
.clue,
.emoji,
.answer-form input,
.emoji-option,
.heart,
.maze,
.star-field {
  background-color: var(--panel-background-strong);
  border-color: var(--panel-border);
}

.top { background: linear-gradient(rgb(3 5 18 / 46%), transparent); }

@media (prefers-reduced-transparency: reduce) {
  .card, .letter-card, #journey, .tray, .password-hint, #decrypt {
    background: rgb(7 10 28 / 88%);
  }
}

/* Keep final media above the page canvas but below the letter content. */
.letter-background { z-index: 0; }
body > main { position: relative; z-index: 1; }
body > .letter-toolbar { z-index: 5; }