body { padding-bottom: 104px; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: end;
  justify-content: space-around;
  width: min(calc(100% - 12px), 560px);
  height: 88px;
  padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
  border: 1px solid rgba(239, 216, 204, .9);
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  box-sizing: border-box;
  background: rgba(255, 252, 248, .97);
  box-shadow: 0 -7px 24px rgba(137, 92, 72, .13), 0 -1px 2px rgba(255, 255, 255, .9) inset;
  font-family: 'Nunito', Arial, sans-serif;
}

.bottom-nav button { border: 0; background: transparent; color: #675953; font-family: inherit; cursor: pointer; }

.nav-item {
  display: grid;
  grid-template-rows: 48px auto;
  place-items: center;
  width: 20%;
  min-width: 52px;
  padding: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  transition: color .18s ease, transform .18s ease;
}

.nav-item b {
  display: grid;
  width: 50px;
  height: 48px;
  place-items: center;
  font-weight: 400;
}

.nav-item b img {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 3px rgba(137, 87, 66, .12));
  transition: transform .18s ease, filter .18s ease;
}

.nav-item span { display: block; margin-top: 1px; white-space: nowrap; }
.nav-item.active { color: #ea7180; }
.nav-item.active b img { transform: translateY(-1px) scale(1.07); filter: drop-shadow(0 4px 5px rgba(230, 107, 123, .22)); }
.nav-item:active b img { transform: scale(.94); }

.nav-plus {
  flex: 0 0 auto;
  width: 65px;
  height: 65px;
  margin: 0 -3px 13px;
  border: 2px solid rgba(255, 239, 237, .88) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fa9099, #ec6474) !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 45px !important;
  font-weight: 300;
  line-height: 55px !important;
  box-shadow: 0 8px 14px rgba(205, 86, 103, .35), inset 0 2px 2px rgba(255, 255, 255, .34) !important;
  transition: transform .18s ease, box-shadow .18s ease;
}

.nav-plus:active { transform: translateY(2px) scale(.96); box-shadow: 0 4px 8px rgba(205, 86, 103, .3) !important; }

.empty-section { min-height: calc(100vh - 88px); display: grid; place-items: center; padding: 35px; background: #fffaf7; font-family: 'Nunito', Arial, sans-serif; }
.empty-section article { padding: 34px 28px; border: 1px solid #f1e4dd; border-radius: 29px; background: #fffdfc; box-shadow: 0 7px 19px rgba(128, 83, 66, .07); text-align: center; }
.empty-section h1 { margin: 0; font-size: 29px; font-weight: 600; }
.empty-section p { margin: 8px 0 0; color: #897974; }

@media (max-width: 360px) {
  .bottom-nav { width: 100%; border-radius: 27px 27px 0 0; }
  .nav-item { min-width: 45px; font-size: 10.5px; }
  .nav-item b, .nav-item b img { width: 44px; height: 44px; }
  .nav-plus { width: 60px; height: 60px; margin-bottom: 15px; font-size: 42px !important; }
}

/* Small visual hierarchy refinements for the existing screens. */
.together .sparkles,
.person-name .decor { display: none; }
.diary .journey-change { font-size: 39px; }
.diary .minimum-copy b { font-size: 37px; }

@media (max-width: 390px) {
  .diary .journey-change { font-size: 36px; }
  .diary .minimum-copy b { font-size: 33px; }
}

/* Enlarged postcard preview. */
.postcard.unlocked { cursor: zoom-in; transition: transform .18s ease, box-shadow .18s ease; }
.postcard.unlocked:active { transform: scale(.97); }
.postcard-preview {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  opacity: 0;
  background: rgba(64, 47, 48, .42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity .18s ease;
  cursor: zoom-out;
}
.postcard-preview img {
  display: block;
  width: auto;
  max-width: min(88vw, 440px);
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border: 1px solid rgba(255, 245, 235, .9);
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(38, 24, 25, .32);
  transform: scale(.92);
  transition: transform .22s cubic-bezier(.2, .8, .25, 1);
}
.postcard-preview.visible { opacity: 1; }
.postcard-preview.visible img { transform: scale(1); }