/* A tiny storybook scene gives every round a visible purpose. */
.mission-eyebrow { display: block; color: #52634d; font-size: .65rem; font-weight: 800; letter-spacing: .13em; margin-bottom: 8px; }
.child-home { max-width: 780px; padding-top: 12px; padding-bottom: 28px; }
.home-message { background: #fffdf0ed; padding: 17px 30px; }
.home-message p { font-size: .9rem; }
.home-adventure { display: flex; align-items: center; justify-content: center; width: 100%; gap: 8px; margin: 14px 0 22px; }
.home-pet { flex: 0 0 210px; position: relative; margin: 0; padding: 0 0 24px; background: transparent; }
.home-pet .pip { width: 200px; height: 216px; margin: auto; }
.home-pet .emoji-pet { font-size: 9rem; min-height: 200px; }
.home-pet .home-sprout { font-size: 2.8rem; right: 6px; bottom: 40px; }
.pet-invitation { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #355143; padding: 7px 13px; background: #fffdf0; border-radius: 20px; font-size: .75rem; font-weight: 700; box-shadow: 0 3px 0 #2c594326; }
.pet-cheer .pip,.pet-cheer .emoji-pet { animation: celebrate .6s ease; }
.home-mission { width: 310px; padding: 20px 18px 15px; border: 2px solid #fff; border-radius: 25px; background: #fffdf3; box-shadow: 0 5px 0 #294c4538,0 15px 35px #143f4326; transform: rotate(2deg); }
.home-mission h2 { font-size: 1.55rem; line-height: 1.12; margin-bottom: 13px; color: #304d43; }
.home-mission p { text-align: center; font-size: .78rem; font-weight: 700; margin-top: 10px; color: #516147; }
.home-secondary { margin-top: 19px; gap: 10px; }
.home-secondary>.soft-button { width: 134px; min-height: 79px; }
.home-album>span { font-size: 1.4rem; }
.home-album small { color: #536c5c; font-size: .68rem; }
.home-secondary>.home-album { gap: 1px; }

.mission-scene { position: relative; height: 78px; border-radius: 15px; overflow: hidden; isolation: isolate; }
.theme-lanterns { background: linear-gradient(180deg,#314265,#596387); }
.theme-picnic { background: linear-gradient(180deg,#c5ecdb,#e8f4cf); }
.theme-rainbow { background: linear-gradient(180deg,#cce9f2,#f5e7f6); }
.scene-sky { position: absolute; right: 12px; top: -2px; color: #ffeeb7; font-size: 2.2rem; line-height: 1; opacity: .8; }
.theme-rainbow .scene-sky { color: white; right: 7px; font-size: 3rem; }
.theme-picnic .scene-sky { color: #ad752a; }
.scene-ground { position: absolute; z-index: -1; inset: auto -10% -24px; height: 53px; border-radius: 50% 50% 0 0; background: #334f683d; }
.theme-picnic .scene-ground { background: repeating-conic-gradient(#e5aaaa 0 25%,#f8e6cc 0 50%) 0 / 16px 16px; }
.theme-rainbow .scene-ground { background: #729c773b; }
.mission-items { position: absolute; inset: 12px 15px 9px; display: flex; align-items: center; justify-content: space-around; gap: 7px; }
.mission-item { display: grid; place-items: center; width: 42px; height: 45px; font-size: 1.9rem; filter: grayscale(1); opacity: .3; border: 1px dashed #fff8; border-radius: 13px; }
.mission-item.found { opacity: 1; filter: none; border-color: transparent; background: #fff5; box-shadow: 0 0 16px #ffe59044; }
.theme-lanterns .mission-item.found { background: #ffc85a26; box-shadow: 0 0 20px #ffe59055; }
.theme-rainbow .mission-item.found { background: hsl(var(--hue) 80% 87%); }
.mission-trail { width: min(100%,540px); margin: 0 auto 17px; padding: 12px 15px 9px; background: #fffdf3f5; border: 1px solid #fff; border-radius: 21px; box-shadow: 0 5px 18px #1c443c25; }
.mission-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #355044; }
.mission-caption strong { font: 500 1.12rem 'Fredoka',sans-serif; }
.mission-caption>span { flex-shrink: 0; font-size: .75rem; font-weight: 800; }
.mission-trail .mission-scene { height: 67px; }
.mission-trail p { font-size: .77rem; text-align: center; color: #4d6358; margin-top: 6px; }
.kid-play .mission-success { background: #f7ffe8; min-height: 48px; padding: 10px 15px; gap: 10px; justify-content: center; }
.kid-play .mission-success strong { font-size: 1rem; }
.mission-success>span { font-size: 1.3rem; }
.kid-play:has(.mission-success) .mission-item.just-found { animation: seed-pop .5s ease; }

.kid-reward { padding-top: 24px; padding-bottom: 28px; }
.kid-reward .reward-card { width: 550px; padding: 25px 30px; background: #fffdf2f5; }
.kid-reward .reward-card h1 { font-size: clamp(1.6rem,4vw,2.25rem); margin: 8px 0 13px; line-height: 1.15; }
.kid-reward .reward-five { font-size: 1.5rem; }
.kid-reward .seed-prize { font-size: 1.35rem; margin: 12px 0 20px; }
.mission-prize { text-align: center; margin: 16px auto 8px; }
.sticker-gift { display: flex; align-items: center; flex-direction: column; gap: 7px; width: 100%; min-height: 178px; padding: 10px 15px 16px; border: 2px dashed #c6ae78; border-radius: 23px; background: radial-gradient(ellipse,#fff1bb,#fff6dd80); color: #536044; }
.gift-art { display: block; font-size: 4.6rem; line-height: 1.15; animation: gift-wiggle 3s ease-in-out infinite; }
.sticker-gift strong { font: 500 1.4rem 'Fredoka',sans-serif; }
.sticker-gift small { font-size: .74rem; }
.revealed-sticker { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 4px; }
.sticker-art { display: grid; place-items: center; width: 110px; height: 110px; font-size: 4.7rem; background: #fff4cd; border: 6px solid white; border-radius: 32% 45% 35% 43%; box-shadow: 0 5px 0 #d5c79a,0 10px 22px #8b6e3a22; transform: rotate(-8deg); animation: sticker-arrive .45s ease-out; }
.revealed-sticker strong { font: 500 1.4rem 'Fredoka',sans-serif; color: #3f5e48; }
.revealed-sticker p { font-size: .85rem; color: #546549; }
.mission-prize .text-button { min-height: 44px; font-size: .85rem; }
.album-heading { text-align: center; margin: 12px 0 20px; }
.album-heading h2 { margin: 8px 0; }
.album-heading p { font-size: .9rem; color: #4c6257; }
.sticker-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.sticker-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 150px; padding: 12px 8px; border: 2px solid #e1d9bc; border-radius: 19px; text-align: center; background: #fff9e8; }
.sticker-slot>span { font-size: 2.8rem; line-height: 1.3; }
.sticker-slot strong { font: 500 .9rem 'Fredoka',sans-serif; }
.sticker-slot small { font-size: .68rem; line-height: 1.35; color: #506757; }
.sticker-slot.featured { border-color: #58836b; background: #e9f5dc; box-shadow: 0 3px 0 #58836b; }
.sticker-slot.undiscovered { border-style: dashed; background: #ebece34d; color: #626e63; }
.undiscovered>span { font-family: 'Fredoka',sans-serif; color: #768578; }
.album-note { text-align: center; margin: 18px 0; font-size: .85rem; line-height: 1.5; }
.garden-collection { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
@keyframes gift-wiggle { 0%,65%,100% { transform: rotate(0); } 72%,86% { transform: rotate(-7deg); } 79%,93% { transform: rotate(7deg); } }
@keyframes sticker-arrive { from { transform: rotate(-18deg) scale(.5); } to { transform: rotate(-8deg) scale(1); } }

@media(min-width:601px) and (max-height:800px) {
  .child-home { padding-top: 4px; padding-bottom: 18px; }
  .home-message { padding: 12px 25px; }
  .home-message h1 { font-size: 2.3rem; }
  .home-adventure { margin: 10px 0 16px; }
  .home-pet .pip { width: 175px; height: 182px; }
  .home-pet .emoji-pet { font-size: 7rem; min-height: 182px; }
  .home-mission { padding: 15px 17px 12px; }
  .home-mission h2 { font-size: 1.4rem; }
  .home-play { min-height: 65px; font-size: 2rem; }
  .home-secondary { margin-top: 15px; }
  .home-secondary>.soft-button { min-height: 70px; }
  .mission-trail { display: grid; grid-template-columns: 1fr 45%; column-gap: 13px; padding: 10px 13px; margin-bottom: 12px; }
  .mission-caption { align-items: start; gap: 8px; margin: 0; }
  .mission-caption strong { font-size: 1rem; }
  .mission-trail .mission-scene { grid-column: 2; grid-row: 1 / 3; height: 62px; }
  .mission-trail .mission-items { inset: 12px 8px 9px; gap: 4px; }
  .mission-trail .mission-item { font-size: 1.4rem; width: 32px; height: 38px; }
  .mission-trail p { text-align: left; font-size: .7rem; }
  .kid-play .answer-arena { height: 190px; }
  .kid-play .bridge-arena { height: 215px; }
}

@media(max-width:600px) {
  .child-home { padding: 12px 12px 28px; }
  .home-message { padding: 15px 20px; }
  .home-message h1 { font-size: 2rem; }
  .home-message p { font-size: .8rem; }
  .home-adventure { gap: 3px; margin: 15px 0 20px; }
  .home-pet { flex-basis: 115px; padding-bottom: 33px; }
  .home-pet .pip { width: 115px; height: 140px; }
  .home-pet .emoji-pet { font-size: 6rem; min-height: 140px; }
  .home-pet .home-sprout { right: 0; bottom: 44px; font-size: 2rem; }
  .pet-invitation { font-size: .62rem; padding: 7px 8px; white-space: normal; width: max-content; max-width: 120px; }
  .home-mission { flex: 1; max-width: 255px; padding: 14px 11px 12px; }
  .home-mission h2 { font-size: 1.2rem; margin-bottom: 9px; }
  .home-mission .mission-eyebrow { font-size: .52rem; }
  .home-mission p { font-size: .69rem; line-height: 1.4; }
  .home-mission .mission-scene { height: 64px; }
  .home-mission .mission-items { inset: 14px 7px 7px; gap: 4px; }
  .home-mission .mission-item { width: 27px; height: 35px; font-size: 1.2rem; border-radius: 8px; }
  .home-secondary { gap: 8px; max-width: 390px; }
  .home-secondary>.soft-button { flex: 1; min-width: 0; font-size: .75rem; padding: 8px 4px; }
  .mission-trail { padding: 9px 10px 8px; margin-bottom: 12px; border-radius: 18px; }
  .mission-caption strong { font-size: 1rem; }
  .mission-trail .mission-scene { height: 60px; }
  .mission-trail .mission-item { font-size: 1.6rem; height: 36px; }
  .mission-trail p { font-size: .7rem; }
  .kid-play .mission-success strong { font-size: .88rem; }
  .kid-reward { padding: 20px 14px 90px; }
  .kid-reward .reward-card { width: 100%; padding: 23px 20px; margin: 0; }
  .kid-reward .reward-card h1 { max-width: none; }
  .kid-reward .reward-pet { bottom: 0; right: 12px; }
  .sticker-grid { gap: 8px; }
  .sticker-slot { min-height: 133px; padding: 10px 5px; }
  .sticker-slot>span { font-size: 2.2rem; }
  .sticker-slot strong { font-size: .8rem; }
  .sticker-slot small { font-size: .62rem; }
  .album-heading .mission-eyebrow { font-size: .52rem; }
}
@media(max-width:360px) {
  .home-pet { flex-basis: 97px; }
  .home-pet .pip { width: 97px; }
  .home-mission .mission-item { width: 23px; font-size: 1rem; }
  .home-mission h2 { font-size: 1.1rem; }
  .sticker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}