/* --- 背景（暗いオーバーレイ） --- */
.modal-overlay {
  display: none;        /* 最初は非表示（JSでdisplay:flexに切り替え） */
  position: fixed;      /* 画面に固定 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* ★背景を60%の黒にする */
  z-index: 12000;       /* 一番手前に表示（数字は大きめに） */
  align-items: center;     /* 縦の中央 */
  justify-content: center; /* 横の中央 */
}

/* --- お祝いウィンドウ本体 --- */
.congrats-window {
  background-color: #fff;
  width: 70vw;           /* スマホで見やすい幅 */
  max-width: 400px;     /* PCで広がりすぎないように制限 */
  padding: 30px 20px;
  border-radius: 15px;  /* 角丸 */
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3); /* 影をつけて浮き上がらせる */
  
  /* ポップアップ時のアニメーション（ポンッと出る動き） */
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ポップアップアニメーション定義 */
@keyframes popIn {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1.0); opacity: 1; }
}

/* --- (以下は前回と同じボタンなどの装飾) --- */
.congrats-icon { font-size: 4rem; margin-bottom: 10px; }
.congrats-icon img { width: 80%; }
.congrats-title { font-size: 1.8rem; font-weight: bold; color: #ff4757; margin-bottom: 15px; font-family: sans-serif; }
.congrats-text { font-size: 1rem; line-height: 1.6; color: #333; margin-bottom: 25px; }
.congrats-button { background-color: #ff4757; color: white; border: none; padding: 10px 30px; font-size: 1rem; border-radius: 50px; cursor: pointer; }