

#draw{
  display: block;
  margin: 20px auto;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

#draw img{
  width: min(150px, 70vw);
  height: auto;
}

#draw:active img{
  transform: scale(0.95);
}




#result .omikuji-img{
  width: min(250px, 92vw) !important;
  height: auto !important;
  border-radius: 12px;
  display: block;
  margin: 0 auto 10px;
}


/* 結果エリアの位置 */
#result{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* カード全体（中央寄せ、最大幅） */
.omikuji-card{
  width: min(420px, 92vw);
  text-align: center;
}

/* 画像サイズ */
.omikuji-img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  margin: 0 auto 10px;
}

/* タイトルと本文 */
.omikuji-title{
  margin: 8px 0 6px;
}
.omikuji-text{
  margin: 0;
  text-align: left;
}

/* ===== 演出：光って現れる + カニ揺れ ===== */
.omikuji-img{
  animation:
    appearGlow 520ms ease-out both,
    crabWiggle 900ms ease-in-out 520ms 1 both;
}

/* 光って現れる（フェード + 拡大 + グロー） */
@keyframes appearGlow{
  0%{
    opacity: 0;
    transform: scale(0.92);
    filter: brightness(0.8);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  55%{
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(1.2);
    box-shadow: 0 0 22px rgba(255,255,255,0.55);
  }
  100%{
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
}

/* カニっぽい揺れ（左右に細かく、ちょい戻る） */
@keyframes crabWiggle{
  0%   { transform: translateX(0) rotate(0deg); }
  12%  { transform: translateX(-10px) rotate(-1.2deg); }
  24%  { transform: translateX(10px) rotate(1.2deg); }
  36%  { transform: translateX(-8px) rotate(-1deg); }
  48%  { transform: translateX(8px) rotate(1deg); }
  60%  { transform: translateX(-6px) rotate(-0.8deg); }
  72%  { transform: translateX(6px) rotate(0.8deg); }
  84%  { transform: translateX(-3px) rotate(-0.4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}



.crimson{ color: crimson; }
.coral{ color: coral; }
.lightpink{ color: lightpink; }
.gold{ color: gold; }
.mediumseagreen{ color: mediumseagreen; }
.lightskyblue{ color: lightskyblue; }
.cornflowerblue{ color: cornflowerblue; }
.orchid{ color: orchid; }