@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500&display=swap');

/* 🍜 メインボタン */
.ramen-button {
  background: linear-gradient(145deg, #ff3c00, #c80000);
  border: none;
  color: white;
  padding: 10px 30px;
  font-size: 1.2em;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 3px 0 #8b0000;
}
.ramen-button:hover {
  transform: scale(1.05);
  background: linear-gradient(145deg, #ff5722, #d32f2f);
}

/* 💫 サブボタン */
.sub-button {
  background: #ffd54f;
  border: none;
  color: #333;
  padding: 8px 20px;
  font-size: 1em;
  border-radius: 30px;
  cursor: pointer;
  transition: 0.2s;
  box-shadow: 0 2px 0 #caa700;
}
.sub-button:hover {
  transform: scale(1.05);
  background: #ffe082;
}

/* 🟨 スライダー（黄色ver） */
.ramen-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 10px;
  background: #ffe0b2;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
.ramen-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd54f, #ff6f00);
  border: 2px solid #b71c1c;
  box-shadow: 0 0 4px rgba(0,0,0,0.3);
  transition: 0.2s;
}
.ramen-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

/* ⏳ 抽選中の演出 */
.loading-text {
  font-size: 1.3em;
  color: #c80000;
  animation: fadePulse 1s infinite;
}
@keyframes fadePulse {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

/* 🍥 結果カード */
.result-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px auto;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  text-align: left;
  max-width: 380px;
}
.result-card strong {
  color: #c80000;
}
.result-card.topping {
  background-color: #fffaf2;
}

/* 💥 1500円 / 2000円の時の強調アニメーション */
.budget-highlight {
  animation: popHighlight 0.6s ease, goldFlash 1.2s ease; /* ⭐追加 */
  color: #d63324 !important;
  font-weight: bold;
}

/* 拡大アニメ */
@keyframes popHighlight {
  0% { transform: scale(1); }
  30% { transform: scale(1.4); }
  60% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ⭐追加：金色フラッシュ演出 */
@keyframes goldFlash {
  0% {
    background: radial-gradient(circle at center, rgba(255, 223, 0, 0.7), transparent 60%);
  }
  50% {
    background: radial-gradient(circle at center, rgba(255, 255, 180, 0.9), transparent 70%);
  }
  100% {
    background: transparent;
  }
}

/* ⭐追加：ガチャ全体を一瞬だけ光らせる */
.gold-flash {
  animation: bgGoldFlash 1s ease;
}
@keyframes bgGoldFlash {
  0% { box-shadow: 0 0 20px rgba(255,215,0,0.8); background-color: #fffbe6; }
  50% { box-shadow: 0 0 40px rgba(255,255,100,1); background-color: #fff9c4; }
  100% { box-shadow: 0 0 10px rgba(0,0,0,0.1); background-color: #fff7f0; }
}

/* 🍥 結果カード */
.result-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin: 10px auto;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
  text-align: left;
  max-width: 380px;
}
.result-card strong {
  color: #c80000;
}

/* トッピングカード（オレンジ） */
.result-card.topping {
  background-color: #fffaf2; /* 変更なし */
}

/* サイドカード（緑） */
.result-card.sides {
  background-color: #e6f7ea; /* 薄い緑 */
  border-left: 4px solid #28a745; /* アクセントの縦ラインで強調 */
}

/* ドリンクカード（青） */
.result-card.drinks {
  background-color: #e6f0ff; /* 薄い青 */
  border-left: 4px solid #1e88e5; /* アクセントの縦ラインで強調 */
}

/* 合計カード（まとめ） */
.result-card.summary {
  background-color: #fff3e0;
  border-left: 4px solid #ff9800;
}