@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
    font-family: 'Inter', sans-serif;
    background-color: #fffaf0;
}
.qty-btns-non-countable {
    pointer-events: none;
    opacity: 0.5;
}
.ingredient-card-active .ingredient-image {
    border-color: #f799c9;
    filter: none;
}
.ingredient-card-inactive .ingredient-image {
    filter: grayscale(100%);
}
.qty-buttons-container {
    border-width: 2px;
    border-style: solid;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    transition: all 0.3s;
}
.ingredient-card-active .qty-buttons-container {
    border-color: #f799c9;
}
.ingredient-card-active .qty-btn-minus,
.ingredient-card-active .qty-btn-plus {
    background-color: #f799c9;
    color: #ffffff;
}
.ingredient-card-inactive .qty-buttons-container {
    border-color: #e5e7eb;
}
.ingredient-card-inactive .qty-btn-minus,
.ingredient-card-inactive .qty-btn-plus {
    background-color: #e5e7eb;
    color: #4b5563;
}
.speech-bubble {
    position: relative;
    background: #ffe4e6;
    border-radius: 1.5rem;
    padding: 1.25rem;
    color: #d12255;
    font-weight: bold;
    font-size: 1.1rem;
    text-align: center;
    line-height: 1.5;
    box-shadow: 0 6px 10px -2px rgba(0, 0, 0, 0.1), 0 3px 6px -2px rgba(0, 0, 0, 0.06);
    animation: bounceIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    max-width: 300px;
    white-space: nowrap;
}
.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border: solid transparent;
    border-width: 10px 10px 0 10px;
    border-top-color: #ffe4e6;
    transform: translateX(-50%);
}
@keyframes bounceIn {
    0% { transform: scale(0.5) translateY(-50px); opacity: 0; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}
.selected-chip {
    background-color: #feefd1;
    color: #f59e0b;
    border-radius: 9999px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.selected-chip button {
    color: #f59e0b;
    transition: transform 0.2s;
}
.selected-chip button:hover {
    transform: scale(1.1);
}

/* fadeInアニメーション */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* レシピカードアニメーション */
.recipe-card-animation {
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.recipe-card-animation:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* レシピ説明文を3行に制限する */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* =========================================================
   アイコンフレーム（着せ替え）のCSS設定
========================================================= */
.profile-frame {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 110%;
  border-radius: 50%;
  pointer-events: none;
  box-sizing: border-box;
  z-index: 10;
}

/* ★修正: 以下、すべてのフレームの padding を小さくして細くスタイリッシュにしました */

/* 1. ブロンズ */
.frame-bronze {
  box-shadow: 0 0 10px rgba(205, 127, 50, 0.4);
}
.frame-bronze::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* 4px -> 2px */
  background: linear-gradient(135deg, #cd7f32 0%, #e8ba8e 50%, #cd7f32 100%);
  background-size: 200% 200%;
  animation: shine 3s infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 2. シルバー */
.frame-silver {
  box-shadow: 0 0 10px rgba(192, 192, 192, 0.5);
}
.frame-silver::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* 4px -> 2px */
  background: linear-gradient(135deg, #c0c0c0 0%, #ffffff 50%, #c0c0c0 100%);
  background-size: 200% 200%;
  animation: shine 2s infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 3. ゴールド */
.frame-gold {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
}
.frame-gold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* 5px -> 2px */
  background: conic-gradient(from 0deg, #ffd700, #fff8dc, #b8860b, #ffd700);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-border 3s infinite linear;
}

/* 4. プラチナ */
.frame-platinum {
  box-shadow: 0 0 15px rgba(169, 204, 227, 0.8), 0 0 30px rgba(240, 248, 255, 0.6);
  animation: pulse-platinum 2s infinite alternate;
}
.frame-platinum::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 3px; /* 6px -> 3px */
  background: conic-gradient(from 0deg, #e5e4e2 0%, #ffffff 15%, #a9cce3 25%, #e5e4e2 50%, #ffffff 65%, #a9cce3 75%, #e5e4e2 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 3s infinite linear reverse;
}

/* 5. ダイヤ */
.frame-diamond {
  filter: drop-shadow(0 0 10px #b9f2ff);
}
.frame-diamond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px; /* 6px -> 3px */
  background: conic-gradient(from 0deg, #00d4ff, #ffffff, #00d4ff, #ffffff, #00d4ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-border 2.5s infinite linear;
}

/* 6. マスター */
.frame-master {
  box-shadow: 0 0 25px rgba(255, 69, 0, 0.6);
}
.frame-master::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px; /* 6px -> 3px */
  background: conic-gradient(from 0deg, #ff0000, #ff8c00, #ff0000, #ff8c00, #ff0000);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-border 1.5s infinite linear;
}

/* 7. 神 */
.frame-god {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  animation: pulse-glow 2s infinite ease-in-out;
}
.frame-god::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 3px; /* 7px -> 3px */
  background: conic-gradient(from 0deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: rotate-border 2s infinite linear, rainbow 3s infinite linear;
}

/* =========================================================
   いいね獲得数フレーム（人気・カリテーマ）
========================================================= */

/* 1. 人気者 */
.frame-popular {
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.5);
}
.frame-popular::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 2px; /* 4px -> 2px */
  background: linear-gradient(135deg, #ff69b4, #ffa500, #ff69b4);
  background-size: 200% 200%;
  animation: shine 3s infinite linear;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* 2. トレンド */
.frame-trend {
  box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
}
.frame-trend::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 2px; /* 5px -> 2px */
  background: conic-gradient(from 0deg, #8a2be2, #00ffff, #8a2be2, #00ffff, #8a2be2);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 2.5s infinite linear reverse;
}

/* 3. 三ツ星 */
.frame-star {
  box-shadow: 0 0 18px rgba(30, 144, 255, 0.7);
}
.frame-star::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 2px; /* 5px -> 2px */
  background: conic-gradient(from 0deg, #1e90ff, #ffd700, #000080, #ffd700, #1e90ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 4s infinite ease-in-out;
}

/* 4. カリスマ */
.frame-charisma {
  box-shadow: 0 0 20px rgba(220, 20, 60, 0.7);
  animation: pulse-glow 1.5s infinite ease-in-out;
}
.frame-charisma::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 3px; /* 6px -> 3px */
  background: conic-gradient(from 0deg, #dc143c, #ff1493, #8b0000, #dc143c);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 2s infinite linear;
}

/* 5. グラン */
.frame-grand {
  box-shadow: 0 0 20px rgba(218, 165, 32, 0.8), 0 0 40px rgba(255, 20, 147, 0.4);
  animation: pulse-grand 2s infinite ease-in-out;
  z-index: 15;
}
.frame-grand::after {
  content: ""; position: absolute; 
  inset: -1px; /* 膨らみ具合も少し抑える */
  border-radius: 50%; 
  padding: 4px; /* 8px -> 4px */
  background: conic-gradient(from 0deg, #b87333, #ff69b4, #ffd700, #ff1493, #fffaf0, #b87333);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 2.5s infinite linear;
}

/* 6. 殿堂 */
.frame-legend {
  box-shadow: 0 0 30px rgba(255, 140, 0, 0.8);
}
.frame-legend::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 3px; /* 7px -> 3px */
  background: conic-gradient(from 0deg, #ff8c00, #ffd700, #ff4500, #ffff00, #ff8c00);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 1.5s infinite linear;
}

/* 7. 創造神 */
.frame-creator {
  box-shadow: 0 0 35px rgba(255, 0, 255, 0.9);
  animation: pulse-glow 1s infinite alternate;
}
.frame-creator::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; 
  padding: 4px; /* 8px -> 4px */
  background: conic-gradient(from 0deg, #ff00ff, #4b0082, #00ffff, #ff1493, #ff00ff);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rotate-border 1s infinite linear reverse;
}

/* --- アニメーション定義 --- */
@keyframes shine {
  0% { background-position: 0% 0%; }
  100% { background-position: 200% 200%; }
}
@keyframes rotate-border {
  to { transform: rotate(360deg); }
}
@keyframes pulse-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}
@keyframes pulse-platinum {
  0% { box-shadow: 0 0 15px rgba(169, 204, 227, 0.6), 0 0 20px rgba(255, 255, 255, 0.4); }
  100% { box-shadow: 0 0 25px rgba(169, 204, 227, 1), 0 0 50px rgba(255, 255, 255, 0.9); }
}
@keyframes pulse-grand {
  0% { transform: scale(1); box-shadow: 0 0 20px rgba(218, 165, 32, 0.6), 0 0 30px rgba(255, 20, 147, 0.3); }
  50% { transform: scale(1.02); box-shadow: 0 0 30px rgba(255, 215, 0, 0.9), 0 0 60px rgba(255, 105, 180, 0.6); }
  100% { transform: scale(1); box-shadow: 0 0 20px rgba(218, 165, 32, 0.6), 0 0 30px rgba(255, 20, 147, 0.3); }
}