/* Keep the familiar warm layout, with more tactile details in the places users touch. */
.nav-pet-bubble,
.navbar.nav3 .tab-center.active .nav-pet-bubble,
.navbar.nav3 .tab-center[data-active='1'] .nav-pet-bubble {
  width: 64px;
  height: 64px;
  margin-top: -31px;
  border-radius: 23px;
  border: 3px solid #fff9f1;
  box-shadow: 0 0 0 4px rgba(255, 207, 164, .28), 0 7px 22px rgba(232, 141, 91, .42);
}
.nav-pet-bubble .nav-pet-img,
.nav-pet-bubble .nav-pet-vid { border-radius: 20px; }
.nav-pet-bubble::before { border-radius: 23px; animation: navPetGlow 2.8s ease-in-out infinite; }
.tap-heart {
  font-size: 29px;
  line-height: 1;
  color: inherit;
  filter: drop-shadow(0 3px 5px rgba(211, 105, 134, .25));
  text-shadow: none;
  animation: petHeartRise 1.32s cubic-bezier(.16,.72,.27,1) both;
}
@keyframes petHeartRise {
  0% { opacity: 0; transform: translate(-50%, 9px) scale(.65) rotate(-10deg); }
  18% { opacity: 1; transform: translate(-50%, -10px) scale(1.05) rotate(2deg); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--heart-drift, 0px)), -118px) scale(.87) rotate(9deg); }
}

/* The comic orientation chooser returns to its original unconstrained proportions. */
#s-comic-orient .orient-card.v .preview-wrap { height: auto; aspect-ratio: 400/420; }
#s-comic-orient .orient-cta-wrap { position: static; background: transparent; }

/* A notebook surface rather than a table of data. */
#s-diary .diary-compose { position: relative; padding-top: 17px; }
#s-diary .diary-compose::before {
  content: '✿'; position: absolute; top: 12px; right: 27px;
  color: #d99983; font-size: 25px; transform: rotate(17deg);
}
#s-diary .diary-compose > .label,
#s-diary .diary-history > .label { color: #875d4b; font-size: 15px; }
#s-diary .mood-row { gap: 8px; }
#s-diary .mood {
  min-width: 62px; border: 1px solid #efdfce; border-radius: 17px;
  background: #fff9ef; box-shadow: 0 4px 10px rgba(177, 111, 74, .1);
  transition: transform .2s, background .2s, box-shadow .2s;
}
#s-diary .mood.on {
  background: #ffe4d3; border-color: #e5a88e;
  box-shadow: 0 5px 14px rgba(208, 131, 107, .2), inset 0 1px rgba(255,255,255,.72);
  transform: translateY(-3px) rotate(-2deg);
}
#s-diary .mood.on .nm { color: #8b493a; }
#s-diary #diary-input {
  min-height: 160px !important; border: 1px solid #e8d4bd; border-radius: 15px;
  background: repeating-linear-gradient(to bottom, #fffcf5 0, #fffcf5 32px, #efdcc8 33px, #fffcf5 34px);
  box-shadow: 0 6px 18px rgba(144, 91, 58, .09);
  line-height: 34px; padding: 9px 16px;
}
#s-diary .diary-history { border-top: 0; padding-top: 8px; }
#s-diary .diary-item {
  margin: 0 0 16px; padding: 22px 17px 18px;
  border: 1px solid #e9d9c8 !important; border-radius: 17px;
  background: #fffaf1 !important;
  box-shadow: 0 6px 15px rgba(150, 99, 69, .1) !important;
  transform: rotate(-.35deg);
}
#s-diary .diary-item:nth-child(even) { transform: rotate(.35deg); background: #fff8f3 !important; }
#s-diary .diary-item::before {
  content: ''; position: absolute; width: 45px; height: 13px; top: -7px; left: calc(50% - 22px);
  background: rgba(238, 189, 157, .6); transform: rotate(-4deg); border-radius: 2px;
}
#s-diary .diary-item p { color: #654c41; line-height: 1.85; }
#s-diary .diary-reply {
  margin-top: 15px; padding: 13px 15px; border: 1px solid #eedcc9;
  border-radius: 13px; background: #fff2e3; color: #7b5847;
}
#s-diary .diary-reply::before { display: block; }

/* The writer holds a sheet of paper; the reply slips from its envelope. */
#s-letter .pg-head h2 { font-family: 'Fraunces', Georgia, serif; font-size: 32px; }
#s-letter .letter-date { margin-top: 21px; color: #9e745f; }
#s-letter .letter {
  margin: 0 22px 13px; border: 1px solid #e7cdb1 !important;
  border-radius: 5px 13px 12px 6px; padding: 25px 23px;
  background: repeating-linear-gradient(to bottom, #fff9ed 0, #fff9ed 29px, #ead6bd 30px, #fff9ed 31px) !important;
  box-shadow: 3px 6px 17px rgba(125, 77, 52, .15) !important;
  transform: rotate(-.45deg);
}
#s-letter .letter:not(.reply)::before {
  display: block; width: 42px; height: 14px; top: -8px; right: 25px;
  border-radius: 2px; background: rgba(232, 179, 143, .7); box-shadow: none; transform: rotate(5deg);
}
#s-letter .letter .h { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 20px; color: #744c3e; }
#s-letter .letter p { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 17px; line-height: 1.86; }
#s-letter .letter .sig { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 16px; }
#s-letter .letter.reply {
  position: relative; margin: 24px 23px 29px 35px; padding: 0;
  border: 0 !important; border-radius: 9px; background: #f2c9b2 !important;
  box-shadow: 0 7px 18px rgba(139, 83, 58, .16) !important;
  transform: rotate(.7deg);
}
#s-letter .letter.reply::before { display: none; }
#s-letter .reply-envelope {
  min-height: 90px; position: relative; padding: 52px 18px 11px;
  color: #825044; font-size: 12px; text-align: center; overflow: hidden;
}
#s-letter .reply-envelope::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 49px;
  background: #f8dbca; clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 2px 1px rgba(126, 74, 60, .12));
}
#s-letter .reply-seal {
  position: absolute; top: 24px; left: calc(50% - 13px); width: 26px; height: 26px;
  display: grid; place-items: center; z-index: 1; color: #fff;
  border-radius: 50%; background: #d98180; box-shadow: 0 2px 5px rgba(126, 74, 60, .22);
}
#s-letter .reply-paper {
  position: relative; margin: 0 9px 10px; padding: 19px 17px 22px;
  border-radius: 3px; background: #fff9ec;
  box-shadow: 0 2px 7px rgba(99, 63, 47, .1);
}
#s-letter .letter.reply p { color: #674d44; }
#letter-editor .letter-sheet {
  border-radius: 27px 27px 0 0; background: #f8e6d4;
  box-shadow: 0 -10px 38px rgba(80, 49, 37, .24);
}
#letter-editor .letter-sheet::before { background: #d5a98d; }
#letter-editor h3 { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 27px; margin-bottom: 16px; }
#letter-editor .letter-kicker { color: #ae765d; }
#letter-editor .letter-stationery {
  padding: 21px 18px 16px; margin: 0 0 17px;
  border: 1px solid #e9d0b8; border-radius: 6px;
  background: #fffaf0; box-shadow: 3px 7px 17px rgba(142, 92, 61, .12);
  transform: rotate(-.35deg);
}
#letter-editor .letter-to { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 18px; color: #755045; }
#letter-editor .letter-stationery .text-area {
  min-height: min(34dvh, 290px); margin: 8px 0; padding: 4px 0;
  border: 0; border-radius: 0; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #ecd8c2 32px, transparent 33px);
  font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 18px; line-height: 33px;
  box-shadow: none; resize: vertical;
}
#letter-editor .letter-stationery .text-area:focus { border: 0; outline: 0; box-shadow: none; }
#letter-editor .letter-signature { color: #a76e60; text-align: right; font-size: 12px; }
#letter-editor .letter-signature span { color: #d68186; font-size: 19px; vertical-align: middle; }
#letter-editor #letter-send-btn { background: #d68576; box-shadow: 0 6px 16px rgba(179, 99, 83, .25); }

/* Seven art directions share the user's own photo and the same editable message. */
#s-card .card-prev { aspect-ratio: 2/3; border-radius: 8px; background-color: #fff5e8; box-shadow: 0 12px 30px rgba(112, 69, 52, .18); }
#s-card .card-prev .c-bg { inset: 0; width: 100%; height: 100%; object-position: center 35%; }
#s-card .card-prev .c-mask { display: block; background: linear-gradient(180deg, transparent 53%, rgba(72,39,33,.82)); }
#s-card .card-prev .card-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; z-index: 2; pointer-events: none; }
#s-card .card-prev .c-text {
  inset: auto 0 0; height: auto; min-height: 27%; padding: 14px 35px 31px;
  justify-content: flex-end; gap: 4px; z-index: 3; text-align: center; align-items: center;
}
#s-card .card-prev h3 { font-family: 'Ma Shan Zheng', 'PingFang SC', sans-serif; font-size: 29px; line-height: 1.16; color: #fffdf8; }
#s-card .card-prev .dates { font-size: 12px; color: #fff4e4; letter-spacing: 0; }
#s-card .card-prev .msg-cn { font-size: 17px; line-height: 1.45; color: #fffdf8; letter-spacing: 0; margin-top: 2px; }
#s-card .card-prev .brand { display: none; }
#s-card .card-prev.tpl-b .c-text,
#s-card .card-prev.tpl-d .c-text,
#s-card .card-prev.tpl-e .c-text,
#s-card .card-prev.tpl-f .c-text,
#s-card .card-prev.tpl-g .c-text {
  inset: auto 0 0; height: auto; min-height: 27%; padding: 14px 35px 31px;
  justify-content: flex-end; align-items: center; text-align: center; gap: 4px;
}
#s-card .card-prev.tpl-b h3,
#s-card .card-prev.tpl-d h3,
#s-card .card-prev.tpl-e h3 { color: #fffdf8; font-size: 29px; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
#s-card .card-prev.tpl-b .dates,
#s-card .card-prev.tpl-b .msg-cn,
#s-card .card-prev.tpl-d .dates,
#s-card .card-prev.tpl-d .msg-cn,
#s-card .card-prev.tpl-e .dates,
#s-card .card-prev.tpl-e .msg-cn { color: #fffdf8; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
#s-card .card-prev.tpl-b .c-mask,
#s-card .card-prev.tpl-d .c-mask { display: block; }
#s-card .card-prev.tpl-b { background-color: #ffe7ce; }
#s-card .card-prev.tpl-b .c-bg { inset: 12px 12px 0; width: calc(100% - 24px); height: calc(100% - 12px); border-radius: 10px; }
#s-card .card-prev.tpl-c { background-color: #f7f0e3; }
#s-card .card-prev.tpl-c .c-bg { inset: 20px 18px auto; width: calc(100% - 36px); height: 62%; object-position: center 30%; }
#s-card .card-prev.tpl-c .c-mask { display: none; }
#s-card .card-prev.tpl-c .c-text {
  inset: auto 34px 36px; height: auto; min-height: 24%; padding: 10px 13px;
  justify-content: center; align-items: center; text-align: center; gap: 2px;
  border-radius: 6px; background: rgba(255, 249, 238, .96);
  box-shadow: 0 3px 9px rgba(94, 64, 48, .12);
}
#s-card .card-prev.tpl-g .c-text { padding-bottom: 48px; }
#s-card .card-prev.tpl-c h3 { color: #634b40; text-shadow: none; }
#s-card .card-prev.tpl-c .dates,
#s-card .card-prev.tpl-c .msg-cn { color: #796052; text-shadow: none; }
#s-card .card-prev.tpl-d { background-color: #fde8e7; }
#s-card .card-prev.tpl-d .c-bg { inset: 0; width: 100%; height: 100%; object-position: center 35%; }
#s-card .card-prev.tpl-d .c-mask { background: linear-gradient(180deg, transparent 50%, rgba(128,70,81,.82)); }
#s-card .card-prev.tpl-e { background-color: #5d527e; }
#s-card .card-prev.tpl-e .c-mask { background: linear-gradient(180deg, rgba(26,20,50,.08), transparent 50%, rgba(29,25,64,.86)); }
#s-card .card-prev.tpl-f { background-color: #a63437; }
#s-card .card-prev.tpl-f .c-mask { background: linear-gradient(180deg, transparent 50%, rgba(102,24,25,.83)); }
#s-card .card-prev.tpl-g { background-color: #dce8db; }
#s-card .card-prev.tpl-g .c-mask { background: linear-gradient(180deg, transparent 52%, rgba(65,84,65,.83)); }
#s-card .tpl { width: 61px; height: 83px; border-radius: 8px; background: #fff6e9; }
#s-card .tpl img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
#s-card .tpl-b img, #s-card .tpl-d img { width: 100%; height: 100%; margin: 0; }
#s-card .tpl::before { content: ''; position: absolute; inset: 0; z-index: 1; background-size: 100% 100%; pointer-events: none; }
#s-card .tpl-a::before { background-image: url('/static/assets/cards/warm.png'); }
#s-card .tpl-b::before { background-image: url('/static/assets/cards/cartoon.png'); }
#s-card .tpl-c::before { background-image: url('/static/assets/cards/realistic.png'); }
#s-card .tpl-d::before { background-image: url('/static/assets/cards/dreamy.png'); }
#s-card .tpl-e::before { background-image: url('/static/assets/cards/dreamcore.png'); }
#s-card .tpl-f::before { background-image: url('/static/assets/cards/new-year.png'); }
#s-card .tpl-g::before { background-image: url('/static/assets/cards/winter.png'); }
#s-card .tpl::after { display: block; background: linear-gradient(180deg, transparent 42%, rgba(74,42,37,.7)); z-index: 1; }
#s-card .tpl span { z-index: 2; left: 0; right: 0; bottom: 7px; color: #fff; font-size: 11px; }
#s-card .tpl.on { border-color: #d37c69; box-shadow: 0 0 0 2px #fffaf2, 0 0 0 4px #d37c69; }
@media (prefers-reduced-motion: reduce) {
  .tap-heart { animation-duration: .01ms; }
  #s-diary .mood.on { transform: none; }
  #s-diary .diary-item, #s-letter .letter { transform: none; }
}