/* Adopt a Pet */
.ap-pets { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .ap-pets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-petcard {
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pic name" "pic meter"; align-items: center; column-gap: 12px; text-align: left;
  min-height: 110px; padding: 12px 16px; border-radius: var(--radius); border: 4px solid #fff; background: linear-gradient(180deg, #fff, #fff3c7); box-shadow: var(--shadow); cursor: pointer;
}
@media (min-width: 700px) { .ap-petcard { grid-template-columns: 1fr; grid-template-areas: "pic" "name" "meter"; justify-items: center; text-align: center; } }
.ap-petcard__pic { grid-area: pic; font-size: 72px; line-height: 1; }
.ap-petcard__name { grid-area: name; font-size: 26px; font-weight: 900; color: var(--barn); overflow-wrap: anywhere; }
.ap-petcard .ap-meter { grid-area: meter; }
.ap-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ap-hearts { font-size: 26px; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.ap-mood { font-weight: 900; font-size: 18px; color: var(--ink-2); }
.ap-note { text-align: center; font-weight: 900; font-size: 20px; background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.ap-small { text-align: center; }
.ap-kinds .a-tile { min-height: 124px; }
.ap-ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 560px) { .ap-ideas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ap-idea { font-size: 22px; padding: 10px; }
.ap-label { font-weight: 900; font-size: 17px; text-align: center; }
.ap-input { width: 100%; min-height: 70px; border-radius: 20px; border: 4px solid #d8cfbd; background: #fffef9; color: var(--ink); font: inherit; font-size: 28px; font-weight: 800; padding: 8px 16px; text-align: center; }
.ap-input:focus { outline: none; border-color: var(--barn); box-shadow: 0 0 0 4px rgba(196, 61, 44, .2); }
.ap-kind { color: #8a4b0f; }
.ap-carehead { display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.ap-carehead__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ap-name { font-size: clamp(28px, 8vw, 42px); font-weight: 900; color: var(--barn); line-height: 1.05; outline: none; overflow-wrap: anywhere; }
.ap-pet { position: relative; flex: none; font-size: clamp(84px, 26vw, 130px); line-height: 1; }
.ap-pet.is-happy .ap-pet__emoji { display: inline-block; animation: a-bounce .6s ease 2; }
.ap-pet__fx { position: absolute; top: -8px; right: -10px; font-size: 38px; }
.ap-pet.is-happy .ap-pet__fx { animation: ap-float 1.2s ease forwards; }
@keyframes ap-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-30px); } }
.ap-care { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .ap-care { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ap-carebtn {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 8px; cursor: pointer;
  border-radius: var(--radius); border: 4px solid #fff; background: #fff; box-shadow: var(--shadow); font-weight: 900; font-size: 19px; line-height: 1.1; touch-action: manipulation;
}
.ap-carebtn:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 700px) { .ap-carebtn:last-child:nth-child(odd) { grid-column: auto; } }
.ap-carebtn__emoji { font-size: 46px; line-height: 1; }
.ap-carebtn:active { transform: translateY(3px); }
.ap-tick { position: absolute; top: 6px; right: 10px; font-size: 26px; color: var(--green); visibility: hidden; }
.ap-carebtn.is-done { background: #eaf7e6; border-color: var(--green); }
.ap-carebtn.is-done .ap-tick { visibility: visible; }
.ap-food { background: #fff8dc; border: 4px solid var(--straw); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ap-food__q { font-weight: 900; font-size: 22px; text-align: center; }
.ap-lesson { display: flex; align-items: center; gap: 12px; min-height: 0; }
.ap-lesson:not(:empty) { background: #fff; border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.ap-lesson__icon { font-size: 40px; flex: none; }
.ap-lesson p { font-size: 20px; font-weight: 800; }
.ap-party-pet { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ap-party-pet__pic { font-size: 90px; line-height: 1; }