@charset "utf-8";

body {font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; margin: 0; padding-top: 20px; line-height: 2.2;}
#app {max-width: 600px; margin: auto; padding: 20px; border: 2px solid #ccc; border-radius: 10px; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}
.container{height: 80px;  position: relative;}
button {display: block; margin: 0 auto; padding: 10px 20px; font-size: 16px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;}
button:hover {background-color: #0056b3;}
#result {margin-top: 10px; font-size: 18px;}
/* ガチャマシンのデザイン */
#gacha-container {position: relative; width: 200px; margin: auto;}
#gacha-machine {width: 100%;}
#lever {position: absolute; width: 37px; height: 37px; border-radius: 10px; right: 82px; top: 197px; cursor: pointer; transition: transform 0.3s ease;}
#message{font-size: 12px; color: #666;}
/* レバーを回すアニメーション */
.lever-active {transform: rotate(30deg);}
/* 商品の演出 */
#prize-box {position: relative; height: 30px; margin-top: 20px;}
#prize-image {z-index: 1; width: 80px; position: absolute; left: 50%; transform: translateX(-50%); animation: drop-prize 1s ease-out forwards;}
/* 景品が落ちてくるアニメーション */
@keyframes drop-prize {
  from {
    top: -40px;
    opacity: 0;
  }
  to {
    top: -10px;
    opacity: 1;
  }
}

/* カプセルの初期位置 */
#capsule {position: absolute; width: 37px; height: 37px; left: calc(50% - 50px); top: 352px; transform: translateX(-50%); display: none;}
/* カプセルが転がる時間を長めに調整 */
@keyframes capsule-move {
  0% {
    transform: translateX(0px) rotate(0deg);
    opacity: 1;
  }
  80% {
    transform: translateX(32px) rotate(540deg); /* 転がる時間を長く */
    opacity: 1;
  }
  90% {
    transform: translateX(32px) rotate(540deg); /* 一瞬止まる */
    opacity: 1;
  }
  100% {
    transform: translateX(32px) rotate(540deg);
    opacity: 0; /* ゆっくり消える */
  }
}
/* 履歴の日付部分のフォントサイズを小さくする */
.history-time {font-size: 12px; color: #666;}
#history-list{margin: 30px auto 15px auto;}
#history-list li{font-size: 13px; color: #333;}
#prize-video-5th, #prize-video-4th, #prize-video-3rd, #prize-video-2nd, #prize-video-1st {width: 100%; max-width: 600px; margin: 0 auto; display: none; border-radius: 10px;}
.instagram-name{line-height: 1;}
.report-button{margin-top: 20px;}
/* 💎 K18アレキサンドライトリングのフォントスタイル */
.prize-ring {font-size: 20px; font-weight: bold; color: #ffcc00; /* ゴールド */ text-shadow: 2px 2px 2px rgba(255, 215, 0, 0.9); animation: glow-ring 1.5s infinite alternate;}
/* クーポン5枚プレゼントのフォントスタイル */
.prize-coupon {font-size: 18px; font-weight: bold; color: #ff66b2; /* ピンク */ text-shadow: 2px 2px 3px rgba(255, 102, 178, 0.8); animation: glow-coupon 1.5s infinite alternate;}
/* 💎 K18アレキサンドライトリングのエフェクト */
.prize-ring::before {content: ""; display: block; margin: -67px auto 0 auto; width: 60px; height: 60px; background-image: url("../images/flare.png"); background-size: contain; background-repeat: no-repeat; background-position: center; animation: sparkle-ring 1.5s infinite alternate; animation: drop-prize 1s ease-out forwards;}
/* 🎟 クーポン5枚プレゼントのエフェクト */
.prize-coupon::before {content: ""; display: block; margin: -67px auto 0 auto; width: 60px; height: 60px; background-image: url("../images/flare.png"); background-size: contain; background-repeat: no-repeat; background-position: center; animation: sparkle-ring 1.5s infinite alternate; animation: drop-prize 1s ease-out forwards;}
/* ゴールドの輝き */
@keyframes glow-ring {
  from {
    text-shadow: 0 0 5px #ffd700, 0 0 10px #ffcc00;
  }
  to {
    text-shadow: 0 0 10px #ffff00, 0 0 20px #ffcc00;
  }
}

/* ピンクの輝き */
@keyframes glow-coupon {
  from {
    text-shadow: 0 0 5px #ff66b2, 0 0 10px #ff3399;
  }
  to {
    text-shadow: 0 0 10px #ff99cc, 0 0 20px #ff66b2;
  }
}

/* ゴールドの光のエフェクト */
@keyframes sparkle-ring {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* ピンクの光のエフェクト */
@keyframes sparkle-coupon {
  from {
    transform: scale(1);
    opacity: 0.8;
  }
  to {
    transform: scale(1.2);
    opacity: 1;
  }
}




@media (max-width : 520px){
body {font-family: Arial, sans-serif; text-align: center; background-color: #f0f8ff; margin: 0; padding-top: 10px; line-height: 2.2;}
#selected-prize{font-size: 15px;}
#history-list{font-size: 14px;}
.instagram-name{line-height: 1;}
.username-input{display: block; margin: 0 auto;}
.history-time {display: block;}
.history-dash {display: none;}
/* 💎 K18アレキサンドライトリングのフォントスタイル */
.prize-ring {font-size: 15px; font-weight: bold; color: #ffcc00; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9); animation: glow-ring 1.5s infinite alternate;}
/* クーポン5枚プレゼントのフォントスタイル */
.prize-coupon {font-size: 15px; font-weight: bold; color: #ff66b2; /* ピンク */ text-shadow: 2px 2px 3px rgba(255, 255, 255, 0.8); animation: glow-coupon 1.5s infinite alternate;}
/* 💎 K18アレキサンドライトリングのエフェクト */
.prize-ring::before {content: ""; display: block; margin: -67px auto 0 auto; width: 60px; height: 60px; width: 60px; height: 60px; background-image: url("../images/flare.png"); background-size: contain; background-repeat: no-repeat; background-position: center; animation: sparkle-ring 1.5s infinite alternate; animation: drop-prize 1s ease-out forwards;}
/* 🎟 クーポン5枚プレゼントのエフェクト */
.prize-coupon::before {content: ""; display: block; margin: -67px auto 0 auto; width: 60px; height: 60px; width: 60px; height: 60px; background-image: url("../images/flare.png"); 
background-size: contain; background-repeat: no-repeat; background-position: center; animation: sparkle-ring 1.5s infinite alternate; animation: drop-prize 1s ease-out forwards;}
#history-list li{line-height: 1.2; margin-bottom: 10px;}




}