*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100vh;display:flex;justify-content:center;align-items:center;background:#fff7ed;color:#5b4636;font-family:Georgia,serif}
button,input,textarea,select{font:inherit}
button,img{-webkit-user-select:none;user-select:none}
.book{width:100%;max-width:430px;padding:25px}
.cover{position:relative;min-height:720px;overflow:hidden;padding:50px 25px;text-align:center;background:#fffdf8;border:2px solid #f3dfc5;border-radius:35px;box-shadow:0 15px 40px rgba(120,80,40,.15)}
#locked-content{position:relative;z-index:5}
.cover.is-unlocked #locked-content>:not(.cat-area){opacity:0;visibility:hidden;pointer-events:none}
.small-title{margin:0 0 15px;color:#b98b5f;font-size:16px;letter-spacing:3px}
h1{margin:0 0 20px;color:#1f5c4a;font-size:42px}
.story,.future{line-height:1.8}.story{margin:0;font-size:18px}.future{margin:30px 0 0}
.countdown-box{padding:25px;background:#fff3e8;border:1px dashed #d7aa7a;border-radius:25px}
#countdown{margin:0 0 15px;color:#52796f;font-size:32px;line-height:1.35}
.countdown-box p{margin:0;line-height:1.6}

.cat-area{position:relative;width:100%;height:250px;margin:20px 0;overflow:hidden}
#nakosan-image{position:absolute;width:190px;height:auto;left:-190px;bottom:0;object-fit:contain;cursor:pointer;z-index:10;animation:lockedCatRun 9s linear infinite}
@keyframes lockedCatRun{from{left:-190px;transform:scaleX(-1)}to{left:100%;transform:scaleX(-1)}}
.cat-area.special-time #nakosan-image{animation:none}
.cat-area.rest-left #nakosan-image{left:8px;right:auto;transform:scaleX(1)}
.cat-area.rest-right #nakosan-image{left:auto;right:8px;transform:scaleX(-1)}
.cat-area.state-normal #nakosan-image{width:125px}
.cat-area.state-sitting #nakosan-image{width:105px}
.cat-area.state-sleeping #nakosan-image{width:135px}
.cat-area.state-happy #nakosan-image{width:145px}
.cat-area.state-drinking #nakosan-image{width:105px;animation:drinkBob .9s ease-in-out infinite alternate}
.cat-area.rest-right.state-drinking #nakosan-image{transform:scaleX(-1)}
#nakosan-image.eating-peach{width:145px;left:50%;right:auto;bottom:5px;transform:translateX(-50%) scaleX(1)}
@keyframes drinkBob{to{margin-bottom:4px}}

#speed-lines{position:absolute;width:190px;height:150px;left:-190px;bottom:10px;pointer-events:none;z-index:8;animation:lockedCatRun 9s linear infinite}
.cat-area.special-time #speed-lines{display:none}
.speed-line{position:absolute;height:3px;background:rgba(185,139,95,.55);border-radius:20px}
.line-1{width:40px;left:12px;top:28px}.line-2{width:27px;left:0;top:45px}.line-3{width:36px;left:10px;bottom:38px}.line-4{width:24px;left:0;bottom:23px}

#heart,#zzz{position:absolute;opacity:0;pointer-events:none;z-index:130}
#heart{width:135px;transform:translateX(-50%) scale(.5)}
#heart.show-heart{animation:heartPop 1.8s ease-out forwards}
@keyframes heartPop{0%{opacity:0;transform:translate(-50%,35px) scale(.5)}25%{opacity:1;transform:translate(-50%,0) scale(1)}70%{opacity:1;transform:translate(-50%,-30px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-95px) scale(1.3)}}
#zzz{width:70px;animation:zzzFloat 1.8s ease-in-out infinite alternate}
#zzz.show{opacity:1}
@keyframes zzzFloat{to{transform:translateY(-9px)}}
.water-drops{position:absolute;width:42px;pointer-events:none;z-index:132}
.pawprint{position:absolute;width:28px;opacity:0;pointer-events:none;z-index:95;animation:pawFade 3s ease-out forwards}
@keyframes pawFade{20%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
.floating-peach{position:absolute;width:30px;opacity:0;pointer-events:none;z-index:20;animation:peachIn .5s forwards,peachSwing 1.8s .5s infinite alternate}
@keyframes peachIn{to{opacity:1}}@keyframes peachSwing{from{transform:translate(-7px,-3px) rotate(-6deg)}to{transform:translate(7px,3px) rotate(6deg)}}

#peach-door{position:absolute;width:250px;height:250px;left:50%;top:170px;opacity:0;visibility:hidden;pointer-events:none;z-index:150;transform:translateX(-50%) scale(.8);transition:.5s}
.cover.unlocking #peach-door{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
.door{position:absolute;width:50%;height:100%;overflow:hidden;transition:transform 1.5s cubic-bezier(.2,.8,.2,1)}
.door img{position:absolute;width:250px;height:250px;object-fit:contain}
.door-left{left:0}.door-left img{left:0}.door-right{right:0}.door-right img{right:0}
#peach-door.open .door-left{transform:translateX(-230px) rotate(-8deg)}
#peach-door.open .door-right{transform:translateX(230px) rotate(8deg)}
#peach-door.finished{opacity:0;visibility:hidden}
#unlock-effects{position:absolute;inset:0;pointer-events:none;z-index:160}
.unlock-shine{position:absolute;width:42px;animation:unlockShine 1.5s ease-out forwards}
@keyframes unlockShine{40%{opacity:1;transform:scale(1.2)}to{opacity:0;transform:scale(1.6) rotate(20deg)}}

#unlock-world{position:absolute;inset:0;display:block;padding:52px 22px 20px;overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;z-index:30;transition:opacity .7s,visibility .7s}
#unlock-world.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.unlock-small-title{position:relative;margin:0 0 8px;color:#b98b5f;font-size:15px;letter-spacing:2px;z-index:35}
.unlock-title{position:relative;margin:0;color:#1f5c4a;font-size:37px;line-height:1.05;z-index:35}
#small-bubbles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.small-bubble{position:absolute;width:var(--bubble-size);height:var(--bubble-size);left:var(--bubble-left);bottom:-50px;border:2px solid rgba(159,205,217,.4);border-radius:50%;animation:floatBubble var(--bubble-duration) linear var(--bubble-delay) infinite}
@keyframes floatBubble{15%{opacity:1}to{opacity:0;transform:translate(var(--bubble-drift),-850px) scale(1.15)}}
.bubble-menu{position:relative;width:100%;max-width:320px;height:405px;margin:20px auto 0;z-index:40}
.menu-bubble{position:absolute;width:150px;padding:0;background:transparent;border:0;cursor:pointer;opacity:0;transition:.8s;animation:menuFloat 4s ease-in-out infinite alternate}
.menu-bubble img{display:block;width:100%;filter:drop-shadow(0 7px 8px rgba(80,60,35,.12))}
@keyframes menuFloat{to{margin-top:5px}}
.bubble-travel{left:2px;top:10px;transform:rotate(45deg) translateY(25px) scale(.75)}
.bubble-diary{right:2px;top:50px;transform:rotate(-45deg) translateY(25px) scale(.75)}
.bubble-game{left:6px;top:170px;transform:translateY(25px) scale(.75)}
.bubble-book{right:3px;top:210px;transform:translateY(25px) scale(.75)}
#unlock-world.menu-ready .menu-bubble{opacity:1}
#unlock-world.menu-ready .bubble-travel{transform:rotate(45deg) scale(1)}
#unlock-world.menu-ready .bubble-diary{transform:rotate(-45deg) scale(1)}
#unlock-world.menu-ready .bubble-game,#unlock-world.menu-ready .bubble-book{transform:scale(1)}
#bubble-person{position:absolute;width:95px;right:3px;bottom:4px;opacity:0;pointer-events:none;z-index:50;transform:translate(25px,20px) rotate(22deg);transition:1s}
#unlock-world.menu-ready #bubble-person{opacity:1;transform:rotate(22deg)}
#nakosan-two{position:absolute;width:105px;left:10px;top:330px;opacity:0;pointer-events:none;z-index:70;transition:left 3s linear,top 3s linear,transform .2s,opacity .5s}
#unlock-world.menu-ready #nakosan-two{opacity:1}
.cover.is-unlocked .cat-area{position:absolute;inset:0;width:100%;height:100%;margin:0;pointer-events:none;z-index:110}
.cover.is-unlocked #nakosan-image{width:115px;left:10px;top:400px;bottom:auto;pointer-events:auto;animation:none;transition:left 2.6s linear,top 2.6s linear,transform .2s}
.cover.is-unlocked #speed-lines{display:none}

#content-panel{position:absolute;inset:0;display:flex;justify-content:center;align-items:flex-start;padding:20px 14px;overflow-y:auto;background:rgba(255,247,237,.96);opacity:0;visibility:hidden;pointer-events:none;z-index:300;transition:.3s}
#content-panel.is-open{opacity:1;visibility:visible;pointer-events:auto}
.panel-card{position:relative;width:100%;min-height:650px;padding:42px 16px 22px;background:#fffdf8;border:2px solid #ead8bd;border-radius:28px}
#close-panel{position:absolute;width:36px;height:36px;right:12px;top:10px;color:#52796f;background:#fff3e8;border:0;border-radius:50%;font-size:27px;cursor:pointer}
#panel-title{margin:0 35px 16px;color:#1f5c4a;font-size:28px}
#panel-content{width:100%}

.diary-date-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:14px}
.diary-date-tab{padding:9px 4px;color:#6f5846;background:#fff3e8;border:1px solid #efd6b5;border-radius:16px;cursor:pointer}
.diary-date-tab.active{color:#fff;background:#52796f;border-color:#52796f}
.diary-day-heading{margin:4px 0 14px;color:#1f5c4a;font-size:22px}
.diary-form{display:grid;gap:11px;text-align:left}
.diary-row{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.diary-field{display:grid;gap:5px}
.diary-field label{font-size:13px;font-weight:bold}
.diary-field input,.diary-field select,.diary-field textarea{width:100%;padding:10px 11px;color:#5b4636;background:#fffaf3;border:1px solid #e7cfad;border-radius:14px}
.diary-field textarea{min-height:115px;resize:vertical}
.diary-photo-preview{display:none;width:100%;max-height:230px;object-fit:contain;padding:7px;background:#fff8ed;border:1px dashed #dab78c;border-radius:16px}
.diary-photo-preview.show{display:block}
.diary-submit{padding:12px 16px;color:#fff;background:#52796f;border:0;border-radius:19px;cursor:pointer}
.diary-submit:disabled{opacity:.55}
.diary-helper{min-height:20px;margin:0;color:#9a6f51;font-size:13px;text-align:center}
.diary-entries{display:grid;gap:13px;margin-top:18px}
.diary-empty,.diary-entry{padding:14px;background:#fff8ef;border:1px dashed #e2c49e;border-radius:20px;text-align:left}
.diary-entry-photo{width:100%;max-height:260px;object-fit:contain;margin-bottom:10px;border-radius:15px}
.diary-entry-meta{display:flex;flex-wrap:wrap;gap:6px}
.diary-chip{padding:5px 8px;color:#58756d;background:#edf4ef;border-radius:999px;font-size:12px}
.diary-language{margin-top:10px;padding-top:10px;border-top:1px dashed #dec5a3}
.diary-language strong{display:block;margin-bottom:4px;color:#1f5c4a;font-size:13px}
.diary-language p{margin:0;white-space:pre-wrap;line-height:1.55}
.diary-delete{display:block;margin:12px 0 0 auto;padding:6px 9px;color:#9d665e;background:transparent;border:1px solid #dfb9b1;border-radius:12px}

.flower-game{text-align:center}.flower-game-intro{line-height:1.55}.flower-game-status{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}
.flower-game-counter,.flower-game-timer{min-width:96px;padding:8px 12px;color:#52796f;background:#fff3e8;border:1px dashed #d7aa7a;border-radius:18px;font-weight:bold}
.flower-game-board{position:relative;isolation:isolate;width:100%;height:455px;overflow:hidden;background:linear-gradient(#fffaf0,#ddc7a8);border:2px solid #ead9bd;border-radius:24px}
.game-floor-line{position:absolute;width:170%;height:2px;left:-30%;top:var(--floor-top);background:rgba(135,102,69,.14);transform:rotate(var(--floor-rotate));z-index:1}
.game-joni{position:absolute;width:185px;left:50%;top:107px;transform:translateX(-50%) rotate(-4deg);z-index:4}
.game-grass-back,.game-grass-front{position:absolute;left:-7%;width:114%;pointer-events:none}
.game-grass-back{height:145px;bottom:-5px;background:#8fac78;z-index:18;clip-path:polygon(0 100%,0 74%,8% 25%,16% 72%,24% 20%,32% 75%,40% 25%,48% 75%,56% 20%,64% 73%,72% 22%,80% 75%,88% 20%,96% 70%,100% 75%,100% 100%)}
.game-grass-front{height:105px;bottom:-7px;background:#52794d;z-index:45;clip-path:polygon(0 100%,0 76%,8% 15%,16% 72%,24% 10%,32% 76%,40% 15%,48% 75%,56% 10%,64% 73%,72% 15%,80% 76%,88% 10%,96% 70%,100% 76%,100% 100%)}
.hidden-flower,.game-decoy{position:absolute;width:var(--item-size);height:var(--item-size);left:var(--item-left);top:var(--item-top);padding:0;background:transparent;border:0;cursor:pointer;z-index:var(--item-layer);transform:rotate(var(--item-rotate))}
.hidden-flower img,.game-decoy img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 5px rgba(55,40,25,.2))}
.hidden-flower.found{opacity:0;transform:rotate(var(--item-rotate)) scale(1.6);pointer-events:none}
.game-decoy.wrong{animation:shake .45s}
@keyframes shake{25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-4px)}}
.game-toast-message{position:absolute;left:50%;top:16px;padding:9px 16px;background:#fffdf8;border:1px solid #e5cba9;border-radius:20px;opacity:0;z-index:95;transform:translateX(-50%)}
.game-toast-message.show{opacity:1}
.flower-found-sparkle{position:absolute;z-index:100;animation:spark .8s forwards}
.flower-found-sparkle:before{content:"✨";font-size:33px}
@keyframes spark{to{opacity:0;transform:translate(-50%,-135%) scale(.8)}}
.flower-game-button{margin-top:14px;padding:11px 22px;color:#fff;background:#52796f;border:0;border-radius:22px}
.flower-game-result{position:absolute;width:calc(100% - 30px);left:15px;top:50%;padding:24px 18px;background:#fffdf8;border:2px solid #e6cfaa;border-radius:24px;opacity:0;visibility:hidden;z-index:120;transform:translateY(-50%)}
.flower-game-result.show{opacity:1;visibility:visible}

@media(max-width:480px){
  body{align-items:flex-start}.book{padding:15px}.cover{padding:40px 18px;border-radius:28px}
  h1{font-size:37px}.story{font-size:16px}.cat-area{height:230px}
  #nakosan-image{width:170px;left:-170px}.menu-bubble{width:138px}
  .diary-date-tabs{grid-template-columns:repeat(2,1fr)}.diary-row{grid-template-columns:1fr}
  .flower-game-board{height:430px}
}


/* =========================
   A Little Book
========================= */

.little-book {
  position: relative;
  min-height: 570px;
  padding: 15px 6px 4px;
  transform-origin: left center;
}

.little-book.turn-forward {
  animation: bookPageForward 0.45s ease;
}

.little-book.turn-back {
  animation: bookPageBack 0.45s ease;
}

@keyframes bookPageForward {
  from {
    opacity: 0.3;
    transform: perspective(900px) rotateY(-12deg);
  }

  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0);
  }
}

@keyframes bookPageBack {
  from {
    opacity: 0.3;
    transform: perspective(900px) rotateY(12deg);
  }

  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0);
  }
}

.book-page {
  min-height: 500px;
  padding: 25px 18px;
  background:
    linear-gradient(
      90deg,
      rgba(194, 156, 107, 0.12),
      transparent 12%,
      transparent 88%,
      rgba(194, 156, 107, 0.09)
    ),
    #fffaf0;
  border: 1px solid #e6cfaa;
  border-radius: 8px 25px 25px 8px;
  box-shadow:
    inset 9px 0 14px rgba(116, 78, 42, 0.07),
    0 12px 24px rgba(90, 60, 35, 0.1);
}

.book-cover-page {
  display: flex;
  min-height: 500px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fefaf1;
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(255, 255, 255, 0.1),
      transparent 30%
    ),
    #315f50;
  border: 5px double #d5b379;
  border-radius: 13px 28px 28px 13px;
}

.book-cover-page h3 {
  margin: 18px 0;
  font-size: 38px;
  line-height: 1.1;
}

.book-cover-page h3 span {
  display: block;
  margin-top: 8px;
  color: #f3d6ac;
  font-size: 23px;
  font-style: italic;
}

.book-kicker {
  margin: 0;
  color: #f3d6ac;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.book-cover-decoration {
  font-size: 32px;
  letter-spacing: 9px;
}

.book-placeholder-note {
  max-width: 240px;
  margin-top: 30px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.5;
}

.book-section-label {
  display: inline-block;
  margin: 0 0 20px;
  padding-bottom: 6px;
  color: #1f5c4a;
  border-bottom: 2px solid #d9b98c;
  font-size: 21px;
  font-style: italic;
}

.book-list-pages {
  display: grid;
  gap: 14px;
}

.book-note-card {
  padding: 16px;
  text-align: left;
  background: #fff4df;
  border: 1px solid #e6cda9;
  border-radius: 8px 20px 8px 20px;
  transform: rotate(-0.8deg);
}

.book-note-card:nth-child(even) {
  transform: rotate(0.8deg);
}

.book-note-card span {
  color: #b07655;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.book-note-card p {
  margin: 8px 0 0;
  color: #4e4036;
  font-size: 18px;
  line-height: 1.5;
}

.book-memory-grid {
  display: grid;
  gap: 14px;
}

.book-memory-card {
  padding: 12px;
  text-align: left;
  background: #fff;
  border: 1px solid #e3c9a5;
  border-radius: 5px;
  box-shadow: 0 7px 15px rgba(91, 70, 54, 0.08);
  transform: rotate(-1deg);
}

.book-memory-card:nth-child(even) {
  transform: rotate(1deg);
}

.book-memory-card img,
.book-photo-placeholder {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 3px;
}

.book-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9f8066;
  background: #f6ead9;
  border: 1px dashed #d4b384;
}

.book-memory-card h4 {
  margin: 12px 0 5px;
  color: #1f5c4a;
}

.book-memory-card p {
  margin: 0;
  line-height: 1.5;
}

.funny-card .book-photo-placeholder {
  font-size: 45px;
}

.book-lesson-paper {
  padding: 22px;
  text-align: left;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 29px,
      rgba(114, 154, 145, 0.18) 30px
    ),
    #fffef8;
  border: 1px solid #e2c8a2;
  border-radius: 8px;
}

.book-lesson-paper p {
  margin-top: 0;
  color: #a06c4b;
  font-style: italic;
}

.book-lesson-paper ul {
  margin: 0;
  padding-left: 22px;
}

.book-lesson-paper li {
  margin-bottom: 15px;
  line-height: 1.55;
}

.song-page h4 {
  margin: 18px 0 3px;
  color: #1f5c4a;
  font-size: 25px;
}

.song-artist {
  margin: 0;
  color: #9c7256;
}

.song-note {
  margin: 20px auto;
  max-width: 265px;
  line-height: 1.65;
}

.record-player {
  position: relative;
  width: 190px;
  height: 190px;
  padding: 0;
  background:
    repeating-radial-gradient(
      circle,
      #202020 0 5px,
      #303030 6px 8px
    );
  border: 10px solid #b78058;
  border-radius: 50%;
  box-shadow:
    0 12px 20px rgba(50, 35, 25, 0.23),
    inset 0 0 0 8px #171717;
  cursor: pointer;
}

.record-player.is-playing {
  animation: recordSpin 2.7s linear infinite;
}

.record-center {
  position: absolute;
  width: 55px;
  height: 55px;
  left: 50%;
  top: 50%;
  background: #d89b8a;
  border: 4px solid #f3d5bd;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

@keyframes recordSpin {
  to {
    transform: rotate(360deg);
  }
}

.book-helper {
  color: #98765f;
  font-size: 12px;
  line-height: 1.5;
}

.pressed-flower-message {
  line-height: 1.5;
}

.pressed-flower-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.pressed-flower-slot {
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #f5ead8;
  border: 1px solid #dec49e;
  border-radius: 50% 42% 48% 40%;
}

.pressed-flower-slot img {
  width: 90%;
  height: 90%;
  object-fit: contain;
  filter: sepia(0.12) saturate(0.8);
}

.pressed-flower-slot.locked {
  color: #b89b7b;
  border-style: dashed;
  font-size: 24px;
}

.complete-bouquet {
  margin: 20px 0 0;
  color: #1f5c4a;
  font-size: 20px;
  font-weight: bold;
}

.letter-page {
  overflow: hidden;
}

.letter-envelope {
  display: block;
  width: 190px;
  height: 135px;
  margin: 55px auto 30px;
  color: #765844;
  background: #f0cfa8;
  border: 2px solid #d2a979;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.35s ease;
}

.letter-envelope span {
  display: block;
  margin-bottom: 8px;
  font-size: 35px;
}

.letter-envelope.open {
  transform: translateY(-25px) rotate(-3deg);
}

.secret-letter {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  text-align: left;
  background: #fffef8;
  border: 0 solid #dfc6a3;
  border-radius: 8px;
  opacity: 0;
  transition:
    max-height 0.7s ease,
    padding 0.7s ease,
    opacity 0.5s ease,
    border-width 0.5s ease;
}

.secret-letter.show {
  max-height: 500px;
  padding: 20px 18px;
  border-width: 1px;
  opacity: 1;
}

.secret-letter p {
  margin: 0;
  line-height: 1.7;
}

.camera-page h4 {
  margin: 15px auto 25px;
  max-width: 270px;
  color: #1f5c4a;
  line-height: 1.5;
}

.camera-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.camera-button,
.save-memory-button {
  display: inline-block;
  padding: 12px 18px;
  color: #fff;
  background: #52796f;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
}

.book-camera-preview {
  display: none;
  width: 100%;
  max-height: 300px;
  margin: 20px 0 12px;
  object-fit: contain;
  padding: 8px 8px 32px;
  background: #fff;
  border: 1px solid #e2c8a2;
  box-shadow: 0 8px 18px rgba(80, 55, 30, 0.14);
  transform: rotate(-1deg);
}

.book-camera-preview.show {
  display: block;
}

.save-memory-button {
  display: block;
  margin: 12px auto;
  background: #b88361;
}

.save-memory-button:disabled {
  opacity: 0.45;
  cursor: default;
}

.stored-memory-gallery {
  display: grid;
  gap: 15px;
  margin-top: 25px;
}

.stored-memory-gallery h5 {
  margin: 0;
  color: #1f5c4a;
  font-size: 17px;
}

.stored-memory-gallery figure {
  margin: 0;
  padding: 8px 8px 28px;
  background: #fff;
  box-shadow: 0 7px 15px rgba(70, 45, 25, 0.14);
}

.stored-memory-gallery img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.stored-memory-gallery figcaption {
  margin-top: 8px;
  color: #92755e;
  font-size: 11px;
}

.ending-page {
  display: flex;
  min-height: 500px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sleeping-book-cat {
  position: relative;
  margin-bottom: 20px;
}

.sleeping-book-cat img {
  width: 155px;
}

.sleeping-book-cat span {
  position: absolute;
  right: -15px;
  top: -12px;
  color: #8d775f;
  animation: endingZZZ 1.6s ease-in-out infinite alternate;
}

@keyframes endingZZZ {
  to {
    transform: translateY(-8px);
  }
}

.ending-page h3 {
  margin: 0;
  color: #1f5c4a;
  font-size: 34px;
}

.ending-page p {
  font-size: 21px;
  line-height: 1.65;
}

.ending-heart {
  font-size: 34px;
}

.book-navigation {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px 0;
}

.paw-next-button {
  width: 64px;
  height: 64px;
  padding: 7px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.paw-next-button:hover,
.paw-next-button:active {
  transform: rotate(12deg) scale(1.08);
}

.paw-next-button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.book-back-button {
  width: 42px;
  height: 42px;
  color: #52796f;
  background: #fff3e8;
  border: 1px solid #e4c8a5;
  border-radius: 50%;
  cursor: pointer;
}

.book-close-button {
  padding: 10px 16px;
  color: #fff;
  background: #52796f;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .book-page {
    min-height: 480px;
    padding: 22px 13px;
  }

  .book-cover-page h3 {
    font-size: 33px;
  }

  .record-player {
    width: 165px;
    height: 165px;
  }

  .pressed-flower-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* Interaction fixes v42 */

.hidden-flower {
  pointer-events: auto;
  touch-action: manipulation;
}

.hidden-flower img,
.game-decoy img,
.game-joni,
.game-floor-line,
.game-grass-back,
.game-grass-front {
  pointer-events: none;
}

/* A Little Book v42 */

.little-book {
  min-height: 570px;
  transform-origin: left center;
}

.little-book.forward {
  animation: littleBookForward 0.42s ease;
}

.little-book.back {
  animation: littleBookBack 0.42s ease;
}

@keyframes littleBookForward {
  from {
    opacity: 0.35;
    transform: perspective(900px) rotateY(-11deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0);
  }
}

@keyframes littleBookBack {
  from {
    opacity: 0.35;
    transform: perspective(900px) rotateY(11deg);
  }
  to {
    opacity: 1;
    transform: perspective(900px) rotateY(0);
  }
}

.little-book-page {
  min-height: 500px;
  padding: 25px 18px;
  background:
    linear-gradient(
      90deg,
      rgba(194, 156, 107, 0.12),
      transparent 12%,
      transparent 88%,
      rgba(194, 156, 107, 0.09)
    ),
    #fffaf0;
  border: 1px solid #e6cfaa;
  border-radius: 8px 25px 25px 8px;
  box-shadow:
    inset 9px 0 14px rgba(116, 78, 42, 0.07),
    0 12px 24px rgba(90, 60, 35, 0.1);
}

.little-book-cover {
  display: flex;
  min-height: 445px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: -25px -18px;
  padding: 30px;
  color: #fffaf0;
  background: #315f50;
  border: 5px double #d5b379;
  border-radius: 13px 28px 28px 13px;
}

.little-book-cover p {
  color: #f3d6ac;
  letter-spacing: 2px;
}

.little-book-cover h3 {
  margin: 18px 0;
  font-size: 38px;
  line-height: 1.1;
}

.little-book-cover h3 span {
  display: block;
  margin-top: 8px;
  color: #f3d6ac;
  font-size: 23px;
  font-style: italic;
}

.little-book-cover-icons {
  font-size: 32px;
  letter-spacing: 8px;
}

.little-book-label {
  display: inline-block;
  margin: 0 0 22px;
  padding-bottom: 6px;
  color: #1f5c4a;
  border-bottom: 2px solid #d9b98c;
  font-size: 22px;
  font-style: italic;
}

.little-book-placeholder {
  padding: 18px;
  line-height: 1.65;
  background: #fff4df;
  border: 1px solid #e6cda9;
  border-radius: 8px 20px;
}

.little-book-photo-placeholder {
  display: flex;
  height: 190px;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  color: #9f8066;
  background: #f6ead9;
  border: 1px dashed #d4b384;
}

.little-book-controls {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 0;
}

.little-book-next {
  width: 65px;
  height: 65px;
  padding: 7px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.little-book-next img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.little-book-back {
  width: 42px;
  height: 42px;
  color: #52796f;
  background: #fff3e8;
  border: 1px solid #e4c8a5;
  border-radius: 50%;
  cursor: pointer;
}

.little-book-finish,
.little-book-save-photo,
.little-book-camera-button {
  display: inline-block;
  padding: 11px 17px;
  color: #fff;
  background: #52796f;
  border: 0;
  border-radius: 19px;
  cursor: pointer;
}

.little-book-record {
  position: relative;
  width: 175px;
  height: 175px;
  padding: 0;
  background:
    repeating-radial-gradient(
      circle,
      #202020 0 5px,
      #303030 6px 8px
    );
  border: 10px solid #b78058;
  border-radius: 50%;
  cursor: pointer;
}

.little-book-record span {
  position: absolute;
  width: 52px;
  height: 52px;
  left: 50%;
  top: 50%;
  background: #d89b8a;
  border: 4px solid #f3d5bd;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.little-book-record.playing {
  animation: littleBookRecordSpin 2.7s linear infinite;
}

@keyframes littleBookRecordSpin {
  to {
    transform: rotate(360deg);
  }
}

.little-book-envelope {
  display: block;
  width: 180px;
  height: 125px;
  margin: 55px auto 25px;
  color: #765844;
  background: #f0cfa8;
  border: 2px solid #d2a979;
  border-radius: 8px;
  cursor: pointer;
}

.little-book-letter {
  max-height: 0;
  overflow: hidden;
  padding: 0 18px;
  text-align: left;
  background: #fffef8;
  border-radius: 8px;
  opacity: 0;
  transition: 0.6s ease;
}

.little-book-letter.show {
  max-height: 350px;
  padding: 20px 18px;
  border: 1px solid #dfc6a3;
  opacity: 1;
}

.little-book-camera-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.little-book-camera-preview {
  display: none;
  width: 100%;
  max-height: 285px;
  margin: 20px 0 12px;
  object-fit: contain;
  padding: 8px 8px 30px;
  background: #fff;
  border: 1px solid #e2c8a2;
}

.little-book-camera-preview.show {
  display: block;
}

.little-book-save-photo {
  display: block;
  margin: 13px auto;
  background: #b88361;
}

.little-book-save-photo:disabled {
  opacity: 0.45;
}

.little-book-helper {
  color: #98765f;
  font-size: 12px;
}

.little-book-gallery {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.little-book-gallery figure {
  margin: 0;
  padding: 8px 8px 26px;
  background: #fff;
  box-shadow: 0 7px 15px rgba(70, 45, 25, 0.14);
}

.little-book-gallery img {
  width: 100%;
  max-height: 250px;
  object-fit: contain;
}

.little-book-gallery figcaption {
  margin-top: 8px;
  color: #92755e;
  font-size: 11px;
}

.little-book-ending {
  display: flex;
  min-height: 440px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.little-book-ending img {
  width: 150px;
}

.little-book-ending span {
  color: #8d775f;
}

.little-book-ending h3 {
  margin-bottom: 5px;
  color: #1f5c4a;
  font-size: 34px;
}


/* Fixes v43 */

/* The warning message is visual only and must not cover game items. */
.game-toast-message {
  pointer-events: none !important;
}

/* Keep all flowers tappable, including near the top-right area. */
.hidden-flower {
  pointer-events: auto !important;
  touch-action: manipulation;
}

/* Decorative layers must not steal taps. */
.game-joni,
.game-floor-line,
.game-grass-back,
.game-grass-front,
.game-toast-message,
.hidden-flower img,
.game-decoy img {
  pointer-events: none;
}

/* Restore pointer handling on the actual flower and decoy buttons. */
.hidden-flower,
.game-decoy {
  pointer-events: auto !important;
}


/* =========================
   Little Book Memories v45
========================= */

.book-random-card {
  padding: 13px;
  text-align: left;
  background: #fffef9;
  border: 1px solid #e2c8a2;
  border-radius: 8px;
  box-shadow:
    0 9px 20px
    rgba(80, 55, 30, 0.12);
}

.book-memory-images {
  display: grid;
  gap: 8px;
}

.book-memory-images.one-image {
  grid-template-columns: 1fr;
}

.book-memory-images.two-images {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.book-memory-images img {
  width: 100%;
  height: 245px;
  object-fit: cover;
  border-radius: 5px;
}

.book-memory-images.two-images img {
  height: 215px;
}

.book-random-card h4,
.book-song-card h4 {
  margin: 9px 0 6px;
  color: #1f5c4a;
  font-size: 21px;
  line-height: 1.35;
}

.book-random-card > p {
  line-height: 1.55;
}

.book-random-number {
  margin: 13px 0 0 !important;
  color: #a07556;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.book-random-button {
  display: block;
  margin: 18px auto 3px;
  padding: 10px 15px;
  color: #fff;
  background: #b88361;
  border: 0;
  border-radius: 18px;
  cursor: pointer;
}

.book-lessons-list {
  display: grid;
  gap: 13px;
}

.book-lesson-card {
  display: grid;
  grid-template-columns:
    38px 1fr;
  align-items: center;
  gap: 12px;
  padding: 15px;
  text-align: left;
  background: #fff4df;
  border: 1px solid #e6cda9;
  border-radius: 8px 20px;
}

.book-lesson-card span {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #52796f;
  border-radius: 50%;
  font-weight: bold;
}

.book-lesson-card p {
  margin: 0;
  line-height: 1.5;
}

.book-song-card {
  padding: 25px 18px;
  background: #fff4df;
  border: 1px solid #e6cda9;
  border-radius: 12px 28px;
}

.book-vinyl {
  position: relative;
  width: 175px;
  height: 175px;
  margin: 0 auto 20px;
  background:
    repeating-radial-gradient(
      circle,
      #202020 0 5px,
      #303030 6px 8px
    );
  border: 9px solid #b78058;
  border-radius: 50%;
  animation:
    bookVinylSpin
    6s linear infinite;
}

.book-vinyl span {
  position: absolute;
  width: 53px;
  height: 53px;
  left: 50%;
  top: 50%;
  background: #d89b8a;
  border: 4px solid #f3d5bd;
  border-radius: 50%;
  transform:
    translate(-50%, -50%);
}

@keyframes bookVinylSpin {
  to {
    transform: rotate(360deg);
  }
}

.book-song-artist {
  margin: 0 0 18px;
  color: #926c53;
}

.spotify-open-button {
  display: inline-block;
  padding: 10px 16px;
  color: #fff;
  background: #1db954;
  border-radius: 19px;
  text-decoration: none;
}

.spotify-coming-soon {
  display: inline-block;
  padding: 9px 14px;
  color: #9c775d;
  background: #f2dfc6;
  border-radius: 18px;
}

@media (max-width: 480px) {
  .book-memory-images img {
    height: 220px;
  }

  .book-memory-images.two-images img {
    height: 180px;
  }

  .book-vinyl {
    width: 155px;
    height: 155px;
  }
}


/* =========================
   v47 Diary
========================= */

.emoji-choice-section {
  display: grid;
  gap: 8px;
  padding: 12px 10px;
  background: #fff8ee;
  border: 1px solid #ead1ae;
  border-radius: 18px;
}

.emoji-choice-title {
  margin: 0;
  color: #715742;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}

.emoji-choice-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.emoji-choice {
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fffdf8;
  border: 1px solid #e3c6a0;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  transition: 0.18s ease;
}

.emoji-choice:hover,
.emoji-choice:active {
  transform: scale(1.08);
}

.emoji-choice.selected {
  background: #dcebe4;
  border-color: #52796f;
  box-shadow: 0 0 0 3px rgba(82, 121, 111, 0.14);
  transform: scale(1.1);
}

.diary-writing-field textarea,
.diary-language p {
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Comic Sans MS",
    cursive;
}

.diary-writing-field textarea {
  min-height: 210px;
  padding: 4px 14px 7px;
  color: #4d443d;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(104, 133, 126, 0.35) 32px,
      transparent 33px
    ),
    #fffef8;
  border: 1px solid #dfc39e;
  border-radius: 7px;
  font-size: 18px;
  line-height: 32px;
}

.diary-photo-label {
  color: #765d49;
  font-size: 13px;
  font-weight: bold;
}

.diary-add-photo-button {
  display: inline-block;
  justify-self: center;
  padding: 10px 16px;
  color: #fff;
  background: #b88361;
  border-radius: 18px;
  cursor: pointer;
}

.diary-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.diary-photo-frame {
  position: relative;
  display: none;
  width: min(100%, 310px);
  aspect-ratio: 4 / 5;
  margin: 8px auto 0;
  overflow: hidden;
}

.diary-photo-frame.show {
  display: block;
}

.diary-photo-preview {
  position: absolute;
  display: block;
  width: 76%;
  height: 72%;
  left: 12%;
  top: 11%;
  max-height: none;
  padding: 0;
  object-fit: cover;
  background: transparent;
  border: 0;
  border-radius: 5px;
  z-index: 1;
}

.diary-photo-frame-art {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.diary-photo-frame::before {
  content: "";
  position: absolute;
  inset: 4%;
  background: #fff;
  border: 2px solid #dcb98d;
  border-radius: 18px 9px 20px 10px;
  box-shadow: 0 9px 20px rgba(75, 50, 30, 0.12);
  transform: rotate(-1deg);
  z-index: 0;
}

.diary-entry-photo {
  padding: 8px 8px 30px;
  background: #fff;
  border: 1px solid #dfc39e;
  box-shadow: 0 7px 15px rgba(70, 45, 25, 0.13);
  transform: rotate(-0.7deg);
}

.diary-language p {
  padding: 0 5px 4px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      rgba(104, 133, 126, 0.25) 28px,
      transparent 29px
    );
  font-size: 16px;
  line-height: 28px;
}

/* =========================
   v47 Secret Letter
========================= */

.illustrated-envelope {
  position: relative;
  width: min(100%, 260px);
  height: 190px;
  margin: 35px auto 18px;
  padding: 0;
  background: transparent;
  border: 0;
}

.illustrated-envelope img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 9px 8px rgba(75, 48, 28, 0.18));
}

.letter-fallback {
  display: none;
  padding: 20px;
  color: #765844;
  background: #f0cfa8;
  border: 2px solid #d2a979;
  border-radius: 8px;
}

.illustrated-envelope.no-letter-art {
  height: auto;
}

.illustrated-envelope.no-letter-art .letter-fallback {
  display: inline-block;
}

.illustrated-letter-paper {
  position: relative;
  max-height: 0;
  overflow: hidden;
}

.illustrated-letter-paper.show {
  max-height: 900px;
  padding: 30px 20px;
}

.letter-paper-art {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: fill;
  opacity: 0.28;
  pointer-events: none;
}

.illustrated-letter-paper p {
  position: relative;
  margin: 0;
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Comic Sans MS",
    cursive;
  font-size: 17px;
  line-height: 1.75;
  z-index: 2;
}

/* =========================
   v47 Ending Heart
========================= */

.little-book-ending .ending-cat {
  width: 150px;
}

.ending-heart-art {
  width: 105px;
  min-height: 85px;
  margin-top: 8px;
}

.ending-heart-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: endingHeartPop 1.6s ease-in-out infinite alternate;
}

.ending-heart-fallback {
  display: none;
  font-size: 38px;
}

@keyframes endingHeartPop {
  from {
    transform: scale(0.94) rotate(-2deg);
  }

  to {
    transform: scale(1.05) rotate(2deg);
  }
}

@media (max-width: 480px) {
  .emoji-choice-row {
    gap: 6px;
  }

  .emoji-choice {
    width: 41px;
    height: 41px;
    font-size: 22px;
  }

  .diary-writing-field textarea {
    font-size: 17px;
  }
}


/* =========================
   v48 Spotify song page
========================= */

.song-cat-scene {
  position: relative;
  min-height: 220px;
}

.book-vinyl.spinning {
  animation: bookVinylSpin 4.8s linear infinite;
}

.song-cat {
  position: absolute;
  width: 88px;
  bottom: 8px;
  z-index: 3;
  animation: singingCatBob 1.5s ease-in-out infinite alternate;
}

.song-cat-left {
  left: -8px;
  transform: rotate(-8deg);
}

.song-cat-right {
  right: -8px;
  transform: scaleX(-1) rotate(-8deg);
  animation-delay: 0.45s;
}

.song-note {
  position: absolute;
  width: 52px;
  z-index: 4;
  animation: musicNoteFloat 2.1s ease-in-out infinite;
}

.song-note-one {
  left: 23%;
  top: 4px;
}

.song-note-two {
  right: 19%;
  top: 38px;
  animation-delay: 0.7s;
}

.spotify-player {
  display: block;
  margin-top: 18px;
  border: 0;
  border-radius: 12px;
}

@keyframes singingCatBob {
  from {
    margin-bottom: 0;
  }

  to {
    margin-bottom: 8px;
  }
}

@keyframes musicNoteFloat {
  0% {
    opacity: 0;
    transform: translateY(12px) rotate(-8deg) scale(0.8);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-35px) rotate(10deg) scale(1.1);
  }
}

/* =========================
   v48 Lessons
========================= */

.lessons-surprise-stage {
  position: relative;
  height: 60px;
}

.lesson-exclamation {
  width: 64px;
  opacity: 0;
}

.lesson-exclamation.pop {
  animation: lessonExclamationPop 0.75s ease-out;
}

.book-lesson-card {
  width: 100%;
  font: inherit;
  cursor: pointer;
}

@keyframes lessonExclamationPop {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.35) rotate(-12deg);
  }

  45% {
    opacity: 1;
    transform: translateY(-4px) scale(1.3) rotate(5deg);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0);
  }
}

/* =========================
   v48 Secret Letter
========================= */

.secret-letter-stage {
  position: relative;
  min-height: 285px;
  overflow: hidden;
}

.letter-writing-cat {
  position: absolute;
  width: 118px;
  left: 3px;
  bottom: 4px;
  animation: letterCatFloat 2.2s ease-in-out infinite alternate;
}

.floating-letter-item {
  position: absolute;
  width: 66px;
  right: 18px;
  top: 24px;
  animation: looseLetterFloat 2.4s ease-in-out infinite alternate;
}

.secret-letter-stage .illustrated-envelope {
  position: absolute;
  width: 145px;
  height: 92px;
  left: 50%;
  top: 85px;
  margin: 0;
  color: #765844;
  background: #f0cfa8;
  border: 2px solid #d2a979;
  border-radius: 8px;
  transform: translateX(-50%);
  z-index: 4;
}

.secret-letter-stage .letter-fallback {
  display: inline-block;
  background: transparent;
  border: 0;
  font-weight: bold;
}

.letter-key-cat {
  position: absolute;
  width: 105px;
  left: -125px;
  top: 112px;
  opacity: 0;
  z-index: 6;
}

.letter-key-item {
  position: absolute;
  width: 47px;
  left: 50%;
  top: 115px;
  opacity: 0;
  z-index: 7;
}

.secret-letter-stage.unlocking .letter-key-cat {
  animation: keyCatEnter 1.2s ease-out forwards;
}

.secret-letter-stage.key-dropped .letter-key-item {
  animation: keyDrop 0.55s ease-in forwards;
}

.secret-letter-stage.opened .illustrated-envelope {
  animation: envelopeUnlock 0.7s ease forwards;
}

.illustrated-letter-paper {
  transform-origin: top center;
}

.illustrated-letter-paper.show {
  animation: letterPaperWhoosh 0.8s cubic-bezier(0.2, 0.8, 0.25, 1);
}

@keyframes letterCatFloat {
  to {
    transform: translate(5px, -8px) rotate(2deg);
  }
}

@keyframes looseLetterFloat {
  to {
    transform: translate(-9px, 9px) rotate(8deg);
  }
}

@keyframes keyCatEnter {
  0% {
    left: -125px;
    opacity: 0;
    transform: rotate(-6deg);
  }

  75% {
    left: 32%;
    opacity: 1;
  }

  100% {
    left: 24%;
    opacity: 1;
    transform: rotate(2deg);
  }
}

@keyframes keyDrop {
  0% {
    opacity: 1;
    transform: translate(-50%, -22px) rotate(-15deg);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 55px) rotate(40deg);
  }
}

@keyframes envelopeUnlock {
  50% {
    transform: translateX(-50%) rotate(-5deg) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-45px) scale(0.75);
  }
}

@keyframes letterPaperWhoosh {
  from {
    opacity: 0;
    transform: translateY(-45px) scaleY(0.35) rotate(-2deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scaleY(1) rotate(0);
  }
}

/* =========================
   v48 Ending
========================= */

.ending-sleep-scene {
  position: relative;
  width: 190px;
  min-height: 135px;
  margin: 0 auto 15px;
}

.ending-sleep-scene .ending-cat {
  position: absolute;
  width: 155px;
  left: 0;
  bottom: 0;
  animation: sleepingCatBreathe 2.6s ease-in-out infinite alternate;
}

.ending-zzz-art {
  position: absolute;
  width: 75px;
  right: 0;
  top: 0;
  animation: endingZzzFloat 1.8s ease-in-out infinite alternate;
}

.ending-heart-art img {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes sleepingCatBreathe {
  to {
    transform: translateY(3px) scale(1.015);
  }
}

@keyframes endingZzzFloat {
  to {
    transform: translate(7px, -12px) rotate(4deg);
  }
}

/* =========================
   v48 Diary
========================= */

.emoji-choice-row {
  flex-wrap: nowrap;
}

.diary-writing-field {
  position: relative;
}

.diary-sleeping-cats {
  position: absolute;
  width: 105px;
  right: 8px;
  bottom: 3px;
  pointer-events: none;
  z-index: 3;
  animation: diaryCatsWiggle 3s ease-in-out infinite alternate;
}

.diary-photo-frame {
  isolation: isolate;
}

/* The user's frame must sit above the selected photo. */
.diary-photo-frame-art {
  display: block !important;
  z-index: 5 !important;
}

.diary-photo-preview {
  z-index: 2 !important;
}

@keyframes diaryCatsWiggle {
  0% {
    transform: translate(0, 0) rotate(-1deg);
  }

  100% {
    transform: translate(-7px, -5px) rotate(2deg);
  }
}

@media (max-width: 480px) {
  .song-cat {
    width: 76px;
  }

  .song-note {
    width: 43px;
  }

  .diary-sleeping-cats {
    width: 91px;
  }
}


/* ========================================================
   v49 — final visual fixes
======================================================== */

/* Spotify: enough room for the official player, no cramped scroll area. */
.spotify-player {
  width: 100% !important;
  height: 352px !important;
  min-height: 352px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 14px;
}

/* --------------------------------------------------------
   Things I Learned From You — random card and bursts
-------------------------------------------------------- */

.lesson-random-page {
  position: relative;
  min-height: 485px;
  padding: 68px 12px 20px;
  overflow: hidden;
}

.lesson-decoration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lesson-random-card {
  position: relative;
  width: 100%;
  min-height: 285px;
  padding: 38px 24px 30px;
  color: #5b4636;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.95),
      rgba(255, 244, 223, 0.96)
    );
  border: 2px solid #dfbe91;
  border-radius: 22px 9px 25px 12px;
  box-shadow:
    0 14px 28px
    rgba(80, 50, 25, 0.13);
  font: inherit;
  text-align: center;
  cursor: pointer;
  z-index: 4;
  transform: rotate(-0.5deg);
}

.lesson-random-card h4 {
  margin: 24px 0 17px;
  color: #1f5c4a;
  font-size: 28px;
  line-height: 1.25;
}

.lesson-random-card p {
  margin: 0;
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Comic Sans MS",
    cursive;
  font-size: 19px;
  line-height: 1.65;
}

.lesson-random-card small {
  display: block;
  margin-top: 25px;
  color: #a37a5a;
}

.lesson-counter {
  display: inline-block;
  padding: 6px 12px;
  color: #fff;
  background: #52796f;
  border-radius: 18px;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.lesson-burst {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}

.lesson-exclamation-burst {
  width: 55px;
}

.lesson-surprise-burst {
  width: 68px;
}

.lesson-burst.burst-now {
  animation:
    lessonBurstV49
    1.05s
    cubic-bezier(0.18, 0.8, 0.25, 1)
    forwards;
}

.burst-1 { left: 0; top: 35px; animation-delay: 0s !important; }
.burst-2 { left: 18%; top: 5px; animation-delay: 0.08s !important; }
.burst-3 { right: 18%; top: 8px; animation-delay: 0.15s !important; }
.burst-4 { right: 0; top: 58px; animation-delay: 0.22s !important; }
.burst-5 { left: 2%; top: 48%; animation-delay: 0.30s !important; }
.burst-6 { right: 1%; top: 50%; animation-delay: 0.38s !important; }
.burst-7 { left: 15%; bottom: 12px; animation-delay: 0.46s !important; }
.burst-8 { right: 15%; bottom: 10px; animation-delay: 0.54s !important; }

.surprise-1 { left: 8%; top: 105px; animation-delay: 0.12s !important; }
.surprise-2 { right: 7%; top: 110px; animation-delay: 0.24s !important; }
.surprise-3 { left: 3%; bottom: 75px; animation-delay: 0.36s !important; }
.surprise-4 { right: 3%; bottom: 70px; animation-delay: 0.48s !important; }
.surprise-5 { left: 50%; top: 5px; animation-delay: 0.60s !important; }

@keyframes lessonBurstV49 {
  0% {
    opacity: 0;
    transform:
      translate(-50%, 20px)
      scale(0.2)
      rotate(-18deg);
  }

  45% {
    opacity: 1;
    transform:
      translate(-50%, -10px)
      scale(1.25)
      rotate(8deg);
  }

  100% {
    opacity: 0.92;
    transform:
      translate(-50%, 0)
      scale(1)
      rotate(0);
  }
}

/* --------------------------------------------------------
   Diary photo frame — exact user asset: journal_flame.png
-------------------------------------------------------- */

.diary-photo-input,
#diary-photo {
  display: none !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.diary-photo-frame {
  position: relative;
  width: min(100%, 330px);
  aspect-ratio: 4 / 5;
  overflow: visible;
  isolation: isolate;
}

.diary-photo-frame::before {
  display: none !important;
}

.diary-photo-preview {
  position: absolute !important;
  width: 72% !important;
  height: 68% !important;
  left: 14% !important;
  top: 13% !important;
  object-fit: cover !important;
  border: 0 !important;
  border-radius: 4px;
  z-index: 1 !important;
}

.diary-photo-frame-art {
  position: absolute !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  object-fit: contain !important;
  pointer-events: none !important;
  z-index: 5 !important;
}

/* --------------------------------------------------------
   One Last Memory — crying star cat and water
-------------------------------------------------------- */

.one-last-memory-page {
  position: relative;
  min-height: 600px;
  padding-bottom: 145px;
  overflow: hidden;
}

.memory-water-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memory-water-drop {
  position: absolute;
  width: 38px;
  opacity: 0.78;
  animation:
    memoryWaterFloat
    2.4s ease-in-out
    infinite alternate;
}

.water-drop-1 { left: 2%; top: 18%; }
.water-drop-2 { right: 4%; top: 13%; animation-delay: .2s; }
.water-drop-3 { left: 8%; top: 43%; animation-delay: .4s; }
.water-drop-4 { right: 7%; top: 42%; animation-delay: .6s; }
.water-drop-5 { left: 3%; bottom: 23%; animation-delay: .8s; }
.water-drop-6 { right: 3%; bottom: 26%; animation-delay: 1s; }
.water-drop-7 { left: 27%; bottom: 12%; animation-delay: 1.2s; }
.water-drop-8 { right: 24%; bottom: 10%; animation-delay: 1.4s; }
.water-drop-9 { left: 45%; top: 8%; animation-delay: 1.6s; }
.water-drop-10 { right: 43%; bottom: 2%; animation-delay: 1.8s; }

.crying-star-cat {
  position: absolute;
  width: 135px;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  animation:
    cryingStarBob
    1.8s ease-in-out
    infinite alternate;
  z-index: 3;
}

@keyframes memoryWaterFloat {
  to {
    transform:
      translate(6px, -9px)
      rotate(7deg)
      scale(1.08);
  }
}

@keyframes cryingStarBob {
  to {
    transform:
      translateX(-50%)
      translateY(-7px)
      rotate(2deg);
  }
}

/* --------------------------------------------------------
   Ending — moon, sleeping cat, love heart and love poses
-------------------------------------------------------- */

.little-book-ending {
  min-height: 600px;
  overflow: hidden;
}

.ending-sleep-scene {
  position: relative;
  width: 235px;
  min-height: 190px;
  margin: 0 auto 12px;
}

.ending-moon {
  position: absolute;
  width: 105px;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  animation:
    endingMoonFloat
    3.4s ease-in-out
    infinite alternate;
}

.ending-sleep-scene .ending-cat {
  position: absolute;
  width: 160px;
  left: 20px;
  bottom: 0;
}

.ending-zzz-art {
  position: absolute;
  width: 72px;
  right: 3px;
  top: 55px;
}

.ending-love-scene {
  position: relative;
  display: flex;
  min-height: 185px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 15px;
}

.ending-love-heart {
  width: 125px;
  max-height: 155px;
  object-fit: contain;
  animation:
    endingLoveHeartbeat
    1.25s ease-in-out
    infinite alternate;
  z-index: 3;
}

.ending-love-pose {
  width: 105px;
  max-height: 155px;
  object-fit: contain;
  animation:
    endingPoseFloat
    2.2s ease-in-out
    infinite alternate;
}

.ending-love-pose-left {
  transform: rotate(-7deg);
}

.ending-love-pose-right {
  transform: scaleX(-1) rotate(-7deg);
  animation-delay: .45s;
}

@keyframes endingMoonFloat {
  to {
    transform:
      translateX(-50%)
      translateY(-8px)
      rotate(3deg);
  }
}

@keyframes endingLoveHeartbeat {
  to {
    transform: scale(1.09);
  }
}

@keyframes endingPoseFloat {
  to {
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .spotify-player {
    height: 352px !important;
    min-height: 352px !important;
  }

  .lesson-random-page {
    padding-inline: 4px;
  }

  .lesson-random-card h4 {
    font-size: 24px;
  }

  .ending-love-pose {
    width: 82px;
  }

  .ending-love-heart {
    width: 105px;
  }
}


/* v50 safety fixes */

.book-error-card {
  padding: 30px 20px;
  background: #fff4df;
  border: 1px solid #e2c8a2;
  border-radius: 18px;
}

.broken-book-image {
  background:
    linear-gradient(
      135deg,
      #f7ead8,
      #fffdf8
    );
  border: 1px dashed #d0ab7d;
}

.diary-sleeping-cats[src=""],
.diary-sleeping-cats:not([src]) {
  display: none;
}

/* v51 readable lessons */
.lesson-random-page{position:relative;min-height:470px;padding:52px 18px 24px;overflow:hidden}.lesson-decoration-layer{position:absolute;inset:0;z-index:1;pointer-events:none}.lesson-random-card{position:relative;z-index:10!important;overflow:hidden;background:rgba(255,253,248,.98)!important}.lesson-random-card h4,.lesson-random-card p,.lesson-random-card small,.lesson-counter{position:relative;z-index:12}.lesson-random-card h4{font-size:clamp(25px,7vw,34px)!important}.lesson-burst{z-index:2!important;max-width:56px}.lesson-exclamation-burst{width:42px!important}.lesson-surprise-burst{width:54px!important}.burst-1{left:4%;top:12px}.burst-2{left:24%;top:4px}.burst-3{right:24%;top:4px}.burst-4{right:4%;top:18px}.burst-5{left:1%;top:42%}.burst-6{right:1%;top:45%}.burst-7{left:7%;bottom:8px}.burst-8{right:7%;bottom:8px}.surprise-1{left:2%;top:95px}.surprise-2{right:2%;top:100px}.surprise-3{left:1%;bottom:80px}.surprise-4{right:1%;bottom:75px}.surprise-5{left:50%;top:0}
/* itinerary */
.itinerary-app{display:grid;gap:20px}.itinerary-intro{padding:24px 18px;background:#fff5e8;border:1px solid #e4c69e;border-radius:24px 10px;text-align:center}.itinerary-kicker{margin:0;color:#b47f5d;font-size:13px;letter-spacing:2px;text-transform:uppercase}.itinerary-intro h3{margin:7px 0 9px;color:#1f5c4a;font-size:31px}.itinerary-day-tabs{display:flex;justify-content:center;gap:7px;position:sticky;top:0;z-index:30;padding:8px 4px;background:rgba(255,253,248,.94)}.itinerary-day-tab{padding:9px 13px;color:#52796f;background:#fff;border:1px solid #d7b78d;border-radius:17px}.itinerary-day-tab.active{color:#fff;background:#52796f}.itinerary-day-page{display:grid;gap:20px}.itinerary-map{position:relative;height:440px;overflow:hidden;background:radial-gradient(circle at 22% 20%,#d9ecd9 0 13%,transparent 14%),radial-gradient(circle at 77% 30%,#dceaf2 0 16%,transparent 17%),radial-gradient(circle at 37% 73%,#eee2c8 0 17%,transparent 18%),#f6f0e4;border:2px solid #dfc49d;border-radius:28px}.itinerary-map-grid{position:absolute;inset:0;opacity:.35;background-image:linear-gradient(rgba(100,125,115,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(100,125,115,.13) 1px,transparent 1px);background-size:40px 40px}.itinerary-route-line{position:absolute;width:100%;height:100%;inset:0}.itinerary-route-line path{fill:none;stroke:#bd8865;stroke-width:1.7;stroke-dasharray:4 3;stroke-linecap:round}.itinerary-map-pin{position:absolute;display:grid;width:46px;height:46px;place-items:center;color:#fff;background:#d06f63;border:4px solid #fff;border-radius:50% 50% 50% 8px;box-shadow:0 6px 12px rgba(75,50,30,.2);transform:translate(-50%,-50%) rotate(-45deg);z-index:5}.itinerary-map-pin span{transform:rotate(45deg);font-weight:bold}.itinerary-map-pin small{position:absolute;width:110px;left:50%;top:49px;color:#654d3e;font-size:11px;line-height:1.15;transform:translateX(-50%) rotate(45deg)}.itinerary-walking-cat{position:absolute;width:76px;left:-90px;bottom:6px;z-index:7;animation:itineraryCatWalk 13s linear infinite}@keyframes itineraryCatWalk{to{left:calc(100% + 10px);transform:scaleX(-1)}}.itinerary-day-heading{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:12px;padding:15px;background:var(--itinerary-accent);border-radius:21px 8px}.itinerary-day-heading>span{display:grid;width:58px;height:58px;place-items:center;color:#fff;background:#52796f;border-radius:50%;font-weight:bold}.itinerary-day-heading h4{margin:0;color:#1f5c4a;font-size:23px}.itinerary-timeline{position:relative;display:grid;gap:17px}.itinerary-timeline:before{content:'';position:absolute;width:3px;left:23px;top:28px;bottom:28px;background:repeating-linear-gradient(to bottom,#c79a73 0 8px,transparent 8px 14px)}.itinerary-stop-card{position:relative;display:grid;grid-template-columns:49px 1fr;gap:11px;scroll-margin-top:85px}.itinerary-stop-marker{position:relative;z-index:2}.itinerary-stop-marker span{display:grid;width:47px;height:47px;place-items:center;color:#fff;background:#b9825f;border:4px solid #fff9ee;border-radius:50%;font-weight:bold}.itinerary-stop-content{padding:16px;background:#fffdf8;border:1px solid #e2c7a1;border-radius:8px 22px}.itinerary-stop-card.itinerary-highlight .itinerary-stop-content{box-shadow:0 0 0 4px rgba(82,121,111,.18)}.itinerary-stop-topline{display:flex;justify-content:space-between}.itinerary-stop-time{color:#b07050;font-weight:bold}.itinerary-stop-content h5{margin:5px 0 8px;color:#1f5c4a;font-size:21px}.itinerary-reservation.reserved{color:#25875e;font-weight:bold}.itinerary-subspots{display:grid;gap:7px;margin-top:13px;padding:11px;background:#f4eadc;border-radius:13px}.itinerary-subspots a{color:#52796f;text-decoration:none}.itinerary-map-link{display:inline-block;margin-top:12px;padding:8px 12px;color:#fff;background:#52796f;border-radius:16px;text-decoration:none}@media(max-width:480px){.itinerary-map{height:400px}.itinerary-map-pin small{width:88px;font-size:10px}}


/* ========================================================
   v52 — food scene, hearts, shiny and bubbles
======================================================== */

.itinerary-day-page {
  position: relative;
  overflow: hidden;
}

.itinerary-decoration-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.itinerary-map,
.itinerary-day-heading,
.itinerary-timeline {
  position: relative;
  z-index: 2;
}

.itinerary-bubble {
  position: absolute;
  width: var(--bubble-size, 22px);
  height: var(--bubble-size, 22px);
  border: 2px solid rgba(156, 202, 214, 0.45);
  border-radius: 50%;
  box-shadow:
    inset 3px 3px 5px rgba(255, 255, 255, 0.8);
  animation:
    itineraryBubbleFloat
    var(--bubble-speed, 5s)
    ease-in-out
    infinite alternate;
}

.itinerary-bubble-1 { left: 3%; top: 5%; --bubble-size: 19px; --bubble-speed: 4.1s; }
.itinerary-bubble-2 { right: 4%; top: 12%; --bubble-size: 32px; --bubble-speed: 5.3s; }
.itinerary-bubble-3 { left: 8%; top: 34%; --bubble-size: 25px; --bubble-speed: 4.6s; }
.itinerary-bubble-4 { right: 7%; top: 42%; --bubble-size: 18px; --bubble-speed: 5.8s; }
.itinerary-bubble-5 { left: 2%; top: 63%; --bubble-size: 36px; --bubble-speed: 6.1s; }
.itinerary-bubble-6 { right: 3%; top: 70%; --bubble-size: 23px; --bubble-speed: 4.9s; }
.itinerary-bubble-7 { left: 16%; bottom: 3%; --bubble-size: 20px; --bubble-speed: 5.5s; }
.itinerary-bubble-8 { right: 17%; bottom: 2%; --bubble-size: 29px; --bubble-speed: 6.3s; }

.itinerary-shiny,
.itinerary-heart {
  position: absolute;
  pointer-events: none;
  opacity: 0.75;
  animation:
    itineraryDecorationDrift
    3.2s ease-in-out
    infinite alternate;
}

.itinerary-shiny {
  width: 34px;
}

.itinerary-heart {
  width: 44px;
}

.itinerary-shiny-1 { left: 2%; top: 18%; }
.itinerary-shiny-2 { right: 1%; top: 27%; animation-delay: .5s; }
.itinerary-shiny-3 { left: 5%; top: 51%; animation-delay: 1s; }
.itinerary-shiny-4 { right: 5%; top: 61%; animation-delay: 1.5s; }
.itinerary-shiny-5 { left: 48%; bottom: 1%; animation-delay: 2s; }

.itinerary-heart-1 { left: 1%; top: 79%; }
.itinerary-heart-2 { right: 2%; top: 84%; animation-delay: .7s; }
.itinerary-heart-3 { left: 42%; top: 2%; animation-delay: 1.3s; }
.itinerary-heart-4 { right: 31%; top: 49%; animation-delay: 1.9s; }

.birthday-food-scene {
  position: relative;
  min-height: 118px;
  margin-top: 14px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at center,
      rgba(255, 239, 211, 0.82),
      rgba(255, 255, 255, 0)
    );
  border-radius: 18px;
}

.food-cat-onigiri {
  position: absolute;
  width: 105px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  animation:
    foodCatBounce
    1.8s ease-in-out
    infinite alternate;
  z-index: 4;
}

.food-fish,
.food-shiny,
.food-heart {
  position: absolute;
  pointer-events: none;
}

.food-fish {
  width: 46px;
  animation:
    foodFishSwim
    2.3s ease-in-out
    infinite alternate;
}

.food-fish-one {
  left: 8%;
  top: 24px;
  transform: rotate(-10deg);
}

.food-fish-two {
  right: 8%;
  top: 12px;
  transform: scaleX(-1) rotate(-8deg);
  animation-delay: .8s;
}

.food-shiny {
  width: 30px;
  animation:
    foodShinyPulse
    1.5s ease-in-out
    infinite alternate;
}

.food-shiny-one {
  left: 29%;
  top: 3px;
}

.food-shiny-two {
  right: 29%;
  top: 28px;
  animation-delay: .5s;
}

.food-heart {
  width: 43px;
  animation:
    foodHeartFloat
    1.9s ease-in-out
    infinite alternate;
}

.food-heart-one {
  left: 13%;
  bottom: 6px;
}

.food-heart-two {
  right: 11%;
  bottom: 0;
  animation-delay: .6s;
}

@keyframes itineraryBubbleFloat {
  to {
    transform:
      translate(7px, -12px)
      scale(1.08);
    opacity: 0.82;
  }
}

@keyframes itineraryDecorationDrift {
  to {
    transform:
      translate(5px, -8px)
      rotate(8deg)
      scale(1.08);
  }
}

@keyframes foodCatBounce {
  to {
    transform:
      translateX(-50%)
      translateY(-7px)
      rotate(2deg);
  }
}

@keyframes foodFishSwim {
  to {
    margin-left: 12px;
    margin-top: -5px;
  }
}

@keyframes foodShinyPulse {
  to {
    transform:
      rotate(14deg)
      scale(1.18);
    opacity: 0.55;
  }
}

@keyframes foodHeartFloat {
  to {
    transform:
      translateY(-9px)
      rotate(7deg)
      scale(1.08);
  }
}

@media (max-width: 480px) {
  .birthday-food-scene {
    min-height: 105px;
  }

  .food-cat-onigiri {
    width: 92px;
  }

  .food-fish {
    width: 39px;
  }

  .itinerary-heart {
    width: 36px;
  }

  .itinerary-shiny {
    width: 28px;
  }
}


/* ========================================================
   v53 Final — move The End moon to the upper-right
======================================================== */

.ending-sleep-scene {
  width: 100%;
  min-height: 205px;
}

.ending-moon {
  width: 105px;
  left: auto !important;
  right: 4px !important;
  top: -18px !important;
  transform: none !important;
  z-index: 4;
  animation:
    endingMoonPerfectSpot
    3.4s ease-in-out
    infinite alternate !important;
}

@keyframes endingMoonPerfectSpot {
  from {
    transform:
      translate(0, 0)
      rotate(-2deg);
  }

  to {
    transform:
      translate(-5px, -7px)
      rotate(3deg);
  }
}

@media (max-width: 480px) {
  .ending-moon {
    width: 92px;
    right: -2px !important;
    top: -14px !important;
  }
}


/* ========================================================
   v54 FINAL — diary backup, route-following cat,
   extra bubbles, hearts and shine
======================================================== */

/* Diary backup tools */
.diary-backup-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.diary-backup-button {
  display: grid;
  min-height: 46px;
  place-items: center;
  padding: 10px 12px;
  color: #52796f;
  background: #fffaf1;
  border: 1px solid #cfa77d;
  border-radius: 17px;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}

.diary-backup-button:hover,
.diary-backup-button:active {
  background: #eef6f1;
}

.diary-import-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Cat follows the dotted map route */
.itinerary-map {
  --route-duration: 14s;
}

.itinerary-paw-trail {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.paw-dot {
  position: absolute;
  color: #a86f4d;
  font-size: 24px;
  line-height: 1;
  opacity: 0.78;
  text-shadow:
    0 1px 0 rgba(255,255,255,.7);
}

.paw-dot-1  { left: 18%; top: 12%; }
.paw-dot-2  { left: 30%; top: 16%; }
.paw-dot-3  { left: 47%; top: 20%; }
.paw-dot-4  { left: 65%; top: 25%; }
.paw-dot-5  { left: 70%; top: 35%; }
.paw-dot-6  { left: 57%; top: 43%; }
.paw-dot-7  { left: 42%; top: 49%; }
.paw-dot-8  { left: 27%; top: 56%; }
.paw-dot-9  { left: 31%; top: 66%; }
.paw-dot-10 { left: 46%; top: 72%; }
.paw-dot-11 { left: 61%; top: 77%; }
.paw-dot-12 { left: 72%; top: 84%; }
.paw-dot-13 { left: 79%; top: 89%; }
.paw-dot-14 { left: 84%; top: 93%; }

.itinerary-walking-cat {
  width: 74px !important;
  left: 16% !important;
  top: 6% !important;
  bottom: auto !important;
  offset-path:
    path("M 60 45 C 290 70, 95 155, 310 180 C 100 235, 300 295, 120 350 C 210 390, 300 410, 345 420");
  offset-rotate: auto;
  animation:
    itineraryCatFollowRoute
    var(--route-duration)
    linear
    infinite !important;
  z-index: 8;
}

@keyframes itineraryCatFollowRoute {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

/* Extra bubbles */
.itinerary-bubble-9  { left: 22%; top: 14%; --bubble-size: 17px; --bubble-speed: 4.2s; }
.itinerary-bubble-10 { right: 20%; top: 20%; --bubble-size: 27px; --bubble-speed: 5.1s; }
.itinerary-bubble-11 { left: 34%; top: 46%; --bubble-size: 21px; --bubble-speed: 4.8s; }
.itinerary-bubble-12 { right: 29%; top: 56%; --bubble-size: 34px; --bubble-speed: 6.2s; }
.itinerary-bubble-13 { left: 27%; bottom: 12%; --bubble-size: 18px; --bubble-speed: 5.4s; }
.itinerary-bubble-14 { right: 8%; bottom: 9%; --bubble-size: 24px; --bubble-speed: 5.9s; }

/* Extra shine */
.itinerary-shiny-6 { left: 20%; top: 9%; animation-delay: .35s; }
.itinerary-shiny-7 { right: 18%; top: 47%; animation-delay: 1.1s; }
.itinerary-shiny-8 { left: 31%; bottom: 8%; animation-delay: 1.7s; }
.itinerary-shiny-9 { right: 32%; bottom: 4%; animation-delay: 2.3s; }

/* Extra hearts */
.itinerary-heart-5 { left: 19%; top: 26%; animation-delay: .4s; }
.itinerary-heart-6 { right: 17%; top: 35%; animation-delay: 1s; }
.itinerary-heart-7 { left: 11%; bottom: 20%; animation-delay: 1.5s; }
.itinerary-heart-8 { right: 12%; bottom: 15%; animation-delay: 2s; }

.itinerary-heart,
.itinerary-shiny {
  filter:
    drop-shadow(
      0 3px 5px
      rgba(90, 60, 35, 0.12)
    );
}

/* Make decorative movement a little richer */
.itinerary-shiny {
  animation:
    itineraryShineSparkle
    2.6s ease-in-out
    infinite alternate !important;
}

.itinerary-heart {
  animation:
    itineraryHeartFloatV54
    3s ease-in-out
    infinite alternate !important;
}

@keyframes itineraryShineSparkle {
  0% {
    opacity: .35;
    transform:
      translate(0, 0)
      rotate(-8deg)
      scale(.82);
  }

  100% {
    opacity: .95;
    transform:
      translate(7px, -10px)
      rotate(12deg)
      scale(1.18);
  }
}

@keyframes itineraryHeartFloatV54 {
  0% {
    opacity: .55;
    transform:
      translate(0, 0)
      rotate(-6deg)
      scale(.94);
  }

  100% {
    opacity: .92;
    transform:
      translate(-5px, -9px)
      rotate(8deg)
      scale(1.08);
  }
}

@media (max-width: 480px) {
  .diary-backup-tools {
    grid-template-columns: 1fr;
  }

  .itinerary-walking-cat {
    width: 64px !important;
  }

  .paw-dot {
    font-size: 20px;
  }
}


/* ========================================================
   v55 FIXED
======================================================== */

.itinerary-paw-trail,
.paw-dot {
  display: none !important;
}

.itinerary-paw-art {
  position: absolute;
  width: 88px;
  right: 13%;
  bottom: 11%;
  opacity: 0.72;
  pointer-events: none;
  z-index: 6;
  transform: rotate(-18deg);
}

.lesson-four-page {
  position: relative;
  min-height: 630px;
  padding: 44px 8px 18px;
  overflow: hidden;
}

.lesson-edge-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.lesson-four-grid {
  position: relative;
  display: grid;
  gap: 13px;
  z-index: 8;
}

.lesson-mini-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 11px;
  width: 100%;
  padding: 15px;
  color: #5b4636;
  background: rgba(255, 253, 248, 0.98);
  border: 1px solid #dfbe91;
  border-radius: 18px 7px 19px 9px;
  box-shadow:
    0 7px 16px
    rgba(80, 50, 25, 0.09);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lesson-mini-card > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  background: #52796f;
  border-radius: 50%;
  font-weight: bold;
}

.lesson-mini-card h4 {
  margin: 0 0 6px;
  color: #1f5c4a;
  font-size: clamp(19px, 5.5vw, 25px);
  line-height: 1.15;
}

.lesson-mini-card p {
  margin: 0;
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Comic Sans MS",
    cursive;
  font-size: 15px;
  line-height: 1.45;
}

.lesson-edge-decoration {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lesson-edge-exclamation {
  width: 34px;
}

.lesson-edge-surprise {
  width: 44px;
}

.lesson-edge-1 { left: 1%; top: 4px; }
.lesson-edge-2 { right: 2%; top: 11px; }
.lesson-edge-3 { left: 2%; bottom: 44px; }
.lesson-edge-4 { right: 2%; bottom: 38px; }
.lesson-surprise-1 { left: 3%; top: 28%; }
.lesson-surprise-2 { right: 3%; top: 54%; }
.lesson-surprise-3 { left: 49%; top: 1px; }

.lesson-edge-decoration.burst-now {
  animation:
    lessonEdgeBurstFixed
    0.85s ease-out
    forwards;
}

@keyframes lessonEdgeBurstFixed {
  0% {
    opacity: 0;
    transform:
      scale(0.25)
      rotate(-12deg);
  }

  55% {
    opacity: 0.75;
    transform:
      scale(1.05)
      rotate(5deg);
  }

  100% {
    opacity: 0.5;
    transform:
      scale(0.9)
      rotate(0);
  }
}

.spotify-player {
  width: 100% !important;
  height: 152px !important;
  min-height: 152px !important;
  overflow: hidden !important;
  border: 0 !important;
}

.flower-gift-success {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px dashed #dcb98d;
}

.flower-gift-cat {
  width: 112px;
  animation:
    flowerGiftCatFixed
    1.7s ease-in-out
    infinite alternate;
}

.flower-gift-message {
  margin: 0;
  color: #1f5c4a;
  font-weight: bold;
  text-align: center;
}

.flower-gift-box {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 66px;
  cursor: pointer;
}

.flower-gift-secret {
  display: grid;
  max-height: 0;
  place-items: center;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 0.45s ease,
    opacity 0.45s ease;
}

.flower-gift-secret strong {
  color: #b9825f;
  font-size: 55px;
}

.flower-gift-secret p {
  margin: 0;
  font-family:
    "Bradley Hand",
    "Segoe Print",
    "Comic Sans MS",
    cursive;
  text-align: center;
}

.flower-gift-success.gift-opened .flower-gift-secret {
  max-height: 150px;
  opacity: 1;
}

@keyframes flowerGiftCatFixed {
  to {
    transform:
      translateY(-6px)
      rotate(2deg);
  }
}


/* ========================================================
   v56 FINAL — iPhone icon + mobile gift reveal fix
======================================================== */

.content-panel,
.panel-content,
#panel-content,
#content-panel {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.flower-game-result,
#flower-game-result,
.flower-gift-success {
  overflow: visible !important;
  max-height: none !important;
}

.flower-gift-success {
  padding-bottom: 28px;
  margin-bottom: 36px;
}

.flower-gift-box {
  position: relative;
  z-index: 20;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.flower-gift-secret {
  position: relative;
  width: 100%;
  max-height: 0;
  padding: 0 12px;
  overflow: hidden;
  box-sizing: border-box;
  opacity: 0;
  z-index: 10;
}

.flower-gift-secret strong {
  display: block;
  max-width: 100%;
  color: #b9825f;
  font-size: clamp(22px, 7vw, 34px);
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

.flower-gift-secret p {
  max-width: 280px;
  margin: 10px auto 0;
  padding-bottom: 10px;
  line-height: 1.45;
  text-align: center;
}

.flower-gift-success.gift-opened .flower-gift-secret {
  max-height: 280px;
  padding-top: 14px;
  opacity: 1;
}

@media (max-width: 480px) {
  .content-panel,
  #content-panel {
    max-height: 92dvh !important;
  }

  .panel-content,
  #panel-content {
    padding-bottom: 96px !important;
  }

  .flower-gift-success {
    margin-bottom: 60px;
  }

  .flower-gift-secret strong {
    font-size: 24px;
  }
}