#container {
  text-align: center;
  }

#fairy {
  width: 300px;
  margin: 10px auto;
  display: block;
}
#menu .subtitle {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 8px;
  text-align: center;
  font-style: italic;
  line-height: 1.4;
}

#menu h2 {
  font-size: 1.5em;
  margin: 8px 0;
  line-height: 1.3;
  text-align: center;
}

#menu p {
  margin: 5px 0;
  line-height: 1.4;
  text-align: center;
}


@keyframes shimmerFade {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(1px, -1px) rotate(0.5deg);
    opacity: 0.6;
  }
}

.shimmerFade {
  animation: shimmerFade 2s infinite ease-in-out;
}


.background {
  width: 100vw;
  max-width: 1080px;           /* 最大幅は背景画像の幅に */
  height: 300px;  /* ←ここを追加 */
  aspect-ratio: 1080 / 600;   /* 横幅に対して高さを自動調整 */
  
  margin: 0 auto;              /* 横中央に配置 */
  background-image: url('../images/table.webp');
  background-size: contain;        /* 画面全体縦横比維持*/
  background-position: center;  /* 中央を基準に表示 */
  background-repeat: no-repeat; /* 繰り返さない */
  position: relative;
  display: flex;
  justify-content: center;  /* 横中央 */
  align-items: center;      /* 縦中央 */
}

.card-container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
}
.card {
  width: 80px;
  height: 120px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 0 6px #aaa;
  line-height: 120px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: box-shadow 0.3s ease;
}

.card.glow {
  box-shadow: 0 0 20px gold;
}

#message, #menu {
  margin-top: 20px;
  font-size: 1.2em;
  text-align: center;
    padding-bottom: 0px; 
}
.message-spacer {
  height: 110px; /* 下に開けたい空間の高さ */
}
#result-buttons {
  margin-top: 20px;
  text-align: center;
  margin-bottom: 100px; /* 下の空き */
}

#result-buttons button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 1em;

}
#result-area {
  position: relative;       /* 背景と内容を重ねる基準 */  
  display: flex;        /* もしくはJavaScriptで付けている */
  flex-direction: column;  /* これを追加すると縦に並びます */
  align-items: center;  /* 横方向の中央寄せ */
  gap: 10px;             /* 画像と文章の間に少し隙間 */
  padding-top: 5px; 
}



#result-area img {
  max-width: 200px;
  width: 60vw;  /* スマホでも大きく見せる */
  height: auto;
}
@keyframes fadeInOnly {
  0% {
    opacity: 0;
    transform: none;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* カード画像 */
#result-image {
  display: block;
  max-width: 300px;
  height: auto;
}

.result-area.show #result-image {
  animation: fadeInOnly 1.5s ease-out forwards;
}

.result-area.show #result-text {
  animation: fadeInOnly 1.7s ease-out forwards;
}
.result-background {
  /* HTMLに直接styleを書いてもOKだが、CSSにまとめるならここで */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%; 
  background: white; /* または半透明にしたい場合 rgba */
  border-radius: 12px;
  z-index: -1;
}


#result-text {
  position: relative;
  flex-direction: column;   /* 画像→テキストの縦並び */
  align-items: center;      /* 横中央 */
  background: rgba(255, 255, 255, 0.9); /* 少し透けて柔らかく */
  text-align: left;
  font-size: 1.2em;
  max-width: 350px;
  width: 90%;
  margin: 1em auto; /* 真ん中に寄せる */
  padding: 1.2em;     /* 文字まわりの余白 */
  border-radius: 16px; /* 角を丸くして柔らかく */
  line-height: 1.6;    /* 読みやすい行間 */
  white-space: pre-wrap;  /* \n を改行として表示 */
    }

#return-area {
  position: relative; /* z-indexを指定する場合は relative にする */
  z-index: 1;         /* 背景より手前に表示 */
  text-align: center;
  margin-top: 20px;
  margin-bottom: 40px; /* 下に余白を追加 */
}
#return-button {
  padding: 10px 20px;
  font-size: 1.1em;
  cursor: pointer;
}


/* スマホ〜タブレットは今のサイズのまま */

/* PC画面用（幅1024px以上） */
@media (min-width: 1024px) {
  .background {
    max-width: 900px; /* PCでは少し背景を小さめにする */
  }

  .card {
    width: 120px;    /* PCではカードを大きくする */
    height: 180px;
  }

  #fairy {
    width: 450px;    /* 妖精の切り抜きもPCでは拡大 */
  }
}