.collection {
  width: min(42rem, 92vw);
  max-height: min(85dvh, calc(100dvh - 1.5rem));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  padding: .85rem .95rem 1.25rem;
}
.collection header, .collection figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(9rem,100%),1fr));
  gap: 1rem;
}
.collection figure { margin: 0; }
.collection img {
  display: block;
  width: 100%;
  border-radius: .65rem;
  margin-bottom: .4rem;
}
.collection li { margin-block: .35rem; }

.zoom-controls { display: flex; gap: .2rem; }
.zoom-controls button { padding-inline: .45rem; }

.reaction-float {
  display: inline-block;
  font-size: 1.4em;
  animation: reaction-rise 2.35s ease-out both;
}
@keyframes reaction-rise {
  0% { opacity: 0; transform: translate(.5rem,.3rem) scale(.82); }
  15% { opacity: 1; transform: translate(0,0) scale(1.15); }
  68% { opacity: 1; }
  100% { opacity: 0; transform: translate(-.8rem,-1.1rem) scale(.96); }
}
@media (prefers-reduced-motion: reduce) {
  .reaction-float { animation: none; }
}

#notice.milestone:not(:empty) {
  border-color: #c4a6fc;
  box-shadow: 0 0 30px #ab71e866;
  color: #f4e8ff;
  font-weight: 720;
}

.pet-profile {display:grid;gap:.5rem;margin-block:.8rem;padding:.65rem .8rem;border:1px solid #655892;border-radius:.75rem;}
.pet-profile label {display:flex;align-items:center;gap:.45rem;padding-block:.3rem;}

.welcome-demo-note {margin:.35rem 1.1rem .15rem;color:#cfc3ea;font-size:.78rem;line-height:1.45;max-width:28rem;}
#together-dialog .welcome-demo-note {margin:.15rem 0 .55rem;max-width:none;}
#adult-dialog {width:min(92vw,24rem);}
#adult-dialog .actions {display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem;}
#adult-dialog-status:not(:empty) {color:#ffd88a;margin:.35rem 0 0;}