/* スタンプ帳レイアウト */
.stamp-grid {
  display: grid;
  gap: 12px;
  align-items: flex-start;
  padding-top: 1vh; /* ← モーダルの上の余白を調整できる */
}

.stamp-box {
  background: #e5e5e5;
  border: 1px solid #ccc;
  border-radius: 8px;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  box-sizing: border-box;
}

.stamp-header {
  height: 2.4em;        /* 1.2em × 2行 */
}
.stamp-footer {
  height: 1.2em;        /* 1.2em × 1行 */
}

.stamp-header, .stamp-footer {
  line-height: 1.2em;   /* 行間 */
  font-size: 12px;
  text-align: center;
  overflow: hidden;     /* はみ出しを隠す */
  flex-shrink: 0;       /* 高さが潰れないようにする */
}
.stamp-body {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 1vh; /* ← モーダルの上の余白を調整できる */
}

.stamp-circle {
  width: 60%;
  min-height: 64px; 
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 4px solid red;
  background-color: transparent;
  color: red;
  font-size: 32px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  background-color: #e5e5e5; 
}

.stamp-empty .stamp-circle {
  background: transparent;
  border: 2px dashed #ccc;
  color: transparent;
}

.stamp-circle img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  transform: scale(0.88); /* ← ここが最重要 */
  transform-origin: center;
}

.stamp-circle img.emoji-two {
  width: 32px;   /* ← 64px の半分 */
  height: 32px;
  transform: scale(0.88);
}

/* 文字スタンプ時の circle と同じ高さにする */
.stamp-body.image-mode {
  flex-grow: 1;          /* 文字スタンプと同じ挙動に戻す */
  padding-top: 1vh;      /* 文字スタンプと同じ余白 */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 画像のサイズは circle と同じ比率にする */
.stamp-image-box {
  width: 60%;            /* circle と同じ */
  aspect-ratio: 1 / 1;   /* 正方形 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.stamp-img-full {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#stamp-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* スタンプを光らせる */
.stamp-box.stamp-highlight {
  animation: pulse 1.2s ease-out;
  border: 3px solid gold;
  box-shadow: 0 0 12px gold;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

@media (min-width: 512px) {
  .stamp-gridt {
    width: 500px !important;
    max-width: 500px !important;
    margin: 0 auto;
  }
}