body { font-family: "Noto Sans JP", sans-serif; background: #f8f6ff; text-align: center; margin: 0; padding: 0; }
h1, h2 { color: #673ab7; }

.camera-btn {
  background: none; border: none; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 1em 0 1em 0;
}
.camera-btn i { font-size: 2.4em; color: #3f51b5; }
.camera-btn div { font-size: 0.9em; color: #3f51b5; }

#stamps { display: flex; justify-content: center; gap: 18px; margin: 2em 0; flex-wrap: wrap; }
.stamp { border: 2px solid #bdbdbd; border-radius: 16px; background: #fff; padding: 1em; min-width: 110px; box-shadow: 0 2px 10px #eee; opacity: 0.3; transition: opacity 0.3s;}
.stamp img { width: 80px; }
.stamp.got { opacity: 1.0; }
#complete-btn { padding: 1em 2em; font-size: 1.2em; margin-top:2em; border-radius: 10px; background: #4caf50; color:#fff; border: none; box-shadow:0 1px 5px #ccc; }
#complete-btn:disabled { background: #ccc; }
a { color:#673ab7;}
@media (max-width: 600px) {
  #stamps { flex-direction: column; align-items: center; }
  .stamp { min-width: 180px; }
}