/* the reply, typed straight onto the night */
.letter {
  position: fixed; right: max(6vw, 16px); top: 50%; width: min(420px, calc(100vw - 32px)); translate: 0 -46%;
  font: 18px/1.65 var(--f-type); color: var(--type-ink); opacity: 0; pointer-events: none;
  text-shadow: 0 0 1px rgba(236,230,214,.5), 0 1px 18px rgba(4,10,18,.95), 0 0 40px rgba(4,10,18,.9);
  transition: opacity .9s ease, translate .9s cubic-bezier(.2,.8,.2,1);
}
.letter::before { content: ""; position: absolute; inset: -60px -70px; z-index: -1; background: radial-gradient(closest-side, rgba(4,10,18,.62), transparent); pointer-events: none; }
.letter.show { opacity: 1; translate: 0 -50%; pointer-events: auto; }
@media (max-width: 720px) {
  .letter { left: 20px; right: 20px; width: auto; top: auto; bottom: max(24px, env(safe-area-inset-bottom, 0px)); translate: 0 16px; font-size: 16px; }
  .letter.show { translate: 0 0; }
}
.letter .typed { white-space: pre-wrap; min-height: 9em; }
.letter .caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: var(--type-ink); opacity: .7; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.letter a { color: var(--glow); }
.letter .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; opacity: 0; pointer-events: none; transition: opacity .8s ease; text-shadow: none; }   /* unseen buttons cannot be tapped: a tap meant to show the rest of the reply used to land on one */
.letter .actions.show { opacity: 1; pointer-events: auto; }
.letter .tapnote { margin: 10px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--ink-soft); text-shadow: none; opacity: 0; transition: opacity .6s ease; }
.letter .tapnote.show { opacity: .85; }

/* a slow breath after letting go, a way out of the wait, and a first-time hint about the other lights */
.breath {
  position: fixed; left: 50%; top: 28%; width: min(26ch, calc(100vw - 32px)); translate: -50% -50%; margin: 0; text-align: center; pointer-events: none;
  font: italic 400 clamp(26px, 3.4vw, 40px)/1.2 var(--f-poem); color: var(--ink); text-shadow: 0 0 30px rgba(10,26,40,.95), 0 0 2px rgba(10,26,40,.8);
  opacity: 0; transition: opacity 1.1s ease;
}
.breath.show { opacity: 1; }
.skip {
  position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; min-height: 44px; padding: 0 22px; cursor: pointer;
  font: 14px var(--f-type); letter-spacing: .05em; color: var(--ink-soft); background: rgba(10,26,40,.5); border: 1px solid rgba(159,179,194,.35); border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .8s ease;
}
.skip.show { opacity: .9; pointer-events: auto; }
.skip:hover { color: var(--ink); }
.skip:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; }
/* the queen's words: a soft bubble beside her, placed by script next to wherever she is on screen */
.bubble {
  position: fixed; left: 0; top: 0; z-index: 2; width: var(--bw, 280px); box-sizing: border-box; padding: 15px 20px 16px; pointer-events: none;
  background: rgba(14, 18, 34, .74); border: 1px solid rgba(255, 226, 176, .2); border-radius: 20px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 36px rgba(255, 205, 130, .1);
  opacity: 0; transition: opacity .9s ease;
}
.bubble.show { opacity: 1; }
.bubble p { margin: 0; font: italic 400 clamp(19px, 1.5vw + 12px, 23px)/1.4 var(--f-poem); color: #f6ecd8; text-wrap: pretty; }
.bubble::after {
  content: ""; position: absolute; width: 14px; height: 14px; background: rgba(14, 18, 34, .74); border: 1px solid rgba(255, 226, 176, .2);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.bubble.above::after { left: var(--tx, 50%); bottom: -8px; translate: -50% 0; rotate: 45deg; border-top: 0; border-left: 0; }
.bubble.right::after { top: var(--ty, 50%); left: -8px; translate: 0 -50%; rotate: 45deg; border-top: 0; border-right: 0; }