/* ===== Почтовая комната — звёздное небо ===== */
body.mail-room {
  /* палитра туманности: больше розового и мадженты, фиолет в основе */
  background:
    radial-gradient(82% 66% at 66% 72%, rgba(246,150,224,.62) 0%, transparent 55%),
    radial-gradient(70% 60% at 50% 60%, rgba(220,108,206,.58) 0%, transparent 58%),
    radial-gradient(92% 82% at 58% 50%, rgba(184,98,206,.46) 0%, transparent 62%),
    radial-gradient(72% 88% at 10% 30%, rgba(154,82,192,.42) 0%, transparent 60%),
    radial-gradient(66% 56% at 88% 12%, rgba(220,90,198,.50) 0%, transparent 56%),
    radial-gradient(140% 125% at 50% 2%, #45285f 0%, #2a163f 46%, #160b27 100%)
    fixed;
}
body.mail-room .page-head h1 { color: #fff; }
body.mail-room .page-head p { color: #cfc9e6; }
body.mail-room .bank h2 { color: #fff; }

.wrap, .room-nav { position: relative; z-index: 2; }

/* пустая полоса неба сверху — место для звёзд писем (видно и на мобильном) */
.sky-space { height: clamp(150px, 24vh, 260px); }

/* звёздное небо на весь фон */
.sky-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sky-bg .sky-deco, .sky-bg .sky-letters { position: absolute; inset: 0; }
/* декоративные звёзды (тусклее) */
.sky-bg .ds { position: absolute; border-radius: 50%; background: #fff;
  box-shadow: 0 0 3px rgba(255,255,255,.6); animation: twkDim 3.6s ease-in-out infinite; }
@keyframes twkDim { 0%,100% { opacity: .14; transform: scale(.8); } 50% { opacity: .6; transform: scale(1.1); } }
/* звёзды писем — яркие, с лучами и сиянием */
.sky-bg .s { position: absolute; width: 14px !important; height: 14px !important; border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, #fff3c8 45%, transparent 72%);
  box-shadow: 0 0 10px 3px rgba(255,248,220,.95), 0 0 26px 9px rgba(255,222,140,.55);
  animation: twk 3.6s ease-in-out infinite; }
.sky-bg .s::before, .sky-bg .s::after { content: ''; position: absolute; left: 50%; top: 50%; }
.sky-bg .s::before { width: 34px; height: 1.6px; transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, rgba(255,250,225,.95) 50%, transparent); }
.sky-bg .s::after { width: 1.6px; height: 34px; transform: translate(-50%,-50%);
  background: linear-gradient(180deg, transparent, rgba(255,250,225,.95) 50%, transparent); }
@keyframes twk { 0%,100% { opacity: .75; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.25); } }
.sky-bg .s.born { animation: starBorn .9s ease, twk 3.6s ease-in-out .9s infinite; }
@keyframes starBorn {
  0% { transform: scale(0); opacity: 0; }
  45% { transform: scale(2.6); opacity: 1; box-shadow: 0 0 26px #fff, 0 0 50px rgba(255,220,150,.95); }
  100% { transform: scale(1); opacity: 1; } }

/* летящая звезда при отправке */
.star-fly { position: fixed; z-index: 62; width: 0; height: 0; pointer-events: none;
  transition: transform 1.5s cubic-bezier(.45,0,.25,1); }
.star-fly .star-core { position: absolute; left: 0; top: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffe9a6 55%, transparent 72%);
  box-shadow: 0 0 14px 4px rgba(255,231,160,.95), 0 0 34px 12px rgba(255,210,120,.55);
  animation: starShine .5s ease-in-out infinite alternate; }
.star-fly .star-core::before, .star-fly .star-core::after { content: ''; position: absolute; left: 50%; top: 50%; }
.star-fly .star-core::before { width: 54px; height: 2px; transform: translate(-50%,-50%);
  background: linear-gradient(90deg, transparent, #fff7d8 50%, transparent); }
.star-fly .star-core::after { width: 2px; height: 54px; transform: translate(-50%,-50%);
  background: linear-gradient(180deg, transparent, #fff7d8 50%, transparent); }
@keyframes starShine { from { transform: scale(.85); filter: brightness(.95); } to { transform: scale(1.32); filter: brightness(1.6); } }

/* летящий конверт при отправке */
.flyer { position: fixed; z-index: 60; pointer-events: none; width: 48px; height: 34px;
  transform: translate(-50%,-50%); transform-origin: center;
  transition: transform 1.7s cubic-bezier(.4,0,.2,1), opacity 1.7s ease; }
.flyer .body { position: absolute; inset: 0; background: #fff; border-radius: 5px; box-shadow: 0 8px 18px rgba(80,60,120,.35); }
.flyer .flap { position: absolute; left: 0; right: 0; top: 0; height: 56%;
  background: #f0dcef; clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 5px 5px 0 0; }
.flyer .wax { position: absolute; left: 50%; top: 52%; width: 17px; height: 17px;
  transform: translate(-50%,-50%) scale(0); border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #ec7a90, #bf3450); box-shadow: 0 2px 5px rgba(120,20,40,.5); }
.flyer.sealed .wax { animation: stamp .45s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes stamp {
  0% { transform: translate(-50%,-50%) scale(0) rotate(-20deg); }
  60% { transform: translate(-50%,-50%) scale(1.4) rotate(6deg); }
  100% { transform: translate(-50%,-50%) scale(1) rotate(0); } }

/* переключатель писем */
.letter-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: rgba(255,255,255,.5); padding: 5px; border-radius: 999px; }
.lt-tab { flex: 1; border: none; cursor: pointer; font-family: inherit; font-weight: 800; font-size: .9rem;
  padding: 10px 8px; border-radius: 999px; color: var(--ink-soft); background: transparent; transition: all .18s; }
.lt-tab.active { background: #fff; color: var(--ink); box-shadow: var(--shadow-soft); }

/* поля желаний */
.wish { margin-bottom: 10px; }
.wish:last-of-type { margin-bottom: 0; }

/* теги типа письма и запечатанное письмо в банке */
.ltag { display: inline-block; font-size: .74rem; font-weight: 800; padding: 3px 11px; border-radius: 999px; margin-bottom: 8px; }
.ltag.universe { background: #ece1f6; color: #7a5fa6; }
.ltag.future { background: #fde4ec; color: #c2587e; }
.sealed-body { background: #faf3ec; border: 1px dashed #e6d0c0; border-radius: 12px; padding: 16px 18px;
  color: #8a7a6a; font-style: italic; text-align: center; line-height: 1.6; }
.sealed-body span { display: block; font-size: .85rem; opacity: .85; margin-top: 4px; }

/* предпросмотр-письмо «на бумаге» */
.letter-preview {
  white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word;   /* длинные слова без пробелов не ломают верстку */
  font-family: 'Nunito', sans-serif;
  font-size: .94rem; line-height: 1.7; color: #5a5168;
  background: linear-gradient(180deg, #fffdf8, #fbf4ec);
  border: 1px solid #ece0d0; border-radius: 14px;
  padding: 20px 22px; max-height: 280px; overflow-y: auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 14px rgba(150,130,120,.12);
}
.letter-preview-wrap { margin-bottom: 18px; }

/* золотой шлейф за конвертом */
.send-trail { position: fixed; z-index: 59; width: 6px; height: 6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff, #ffe08a); box-shadow: 0 0 8px rgba(255,220,140,.9); animation: trailFade 1s ease-out forwards; }
@keyframes trailFade { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(.3) translateY(6px); } }
/* вспышка зажигающейся звезды */
.star-flash { position: fixed; z-index: 58; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%);
  background: radial-gradient(circle, #fff, rgba(255,235,170,.6) 40%, transparent 70%); animation: starFlash 1s ease-out forwards; }
@keyframes starFlash { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.2); } 30% { opacity: 1; transform: translate(-50%,-50%) scale(4); } 100% { opacity: 0; transform: translate(-50%,-50%) scale(7); } }

/* частицы при наборе текста */
.sparkle { position: fixed; z-index: 55; pointer-events: none; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff, #ffe6a8); box-shadow: 0 0 8px rgba(255,220,150,.9);
  animation: sparkleUp 1.1s ease-out forwards; }
@keyframes sparkleUp {
  0% { opacity: 0; transform: translateY(0) scale(.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-48px) scale(1); } }