/* =====================================
   3Dカルーセル（円柱型）スタイル
   6つのパネルが円柱状に配置され回転
   ===================================== */

/* カルーセルコンテナ */
.carousel3d-container {
  position: relative;
  width: 100%;
  height: 380px;
  perspective: 1200px;
  perspective-origin: 50% 50%;
  overflow: visible;
  user-select: none;
  -webkit-user-select: none;
}

/* ドラッグ中のカーソル */
.carousel3d--dragging {
  cursor: grabbing;
}

/* 3Dシーン */
.carousel3d-scene {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* 円柱コンテナ */
.carousel3d-cylinder {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* パネル共通スタイル */
.carousel3d-panel {
  position: absolute;
  width: 280px;
  height: 320px;
  transform-style: preserve-3d;
  cursor: grab;
  will-change: transform, opacity;
  transition: box-shadow 0.3s ease;
}

/* パネル内部 */
.carousel3d-panel-inner {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* アクティブパネル（最前面）のスタイル */
.carousel3d-panel--active .carousel3d-panel-inner {
  box-shadow: 0 16px 48px rgba(24, 119, 242, 0.25);
}

.carousel3d-panel--active:hover .carousel3d-panel-inner {
  transform: scale(1.02);
  box-shadow: 0 20px 60px rgba(24, 119, 242, 0.3);
}

/* パネルヘッダー */
.carousel3d-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1877f2 0%, #0d5bbd 100%);
  color: #ffffff;
}

.carousel3d-panel-header i {
  font-size: 1.2rem;
}

.carousel3d-panel-header svg {
  width: 1.2rem;
  height: 1.2rem;
}

/* 魚のSVGアイコン */
.carousel3d-fish-icon {
  width: 1.5rem;
  height: 1rem;
}

.carousel3d-panel-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* ヘッダーカラーバリエーション */
.carousel3d-panel-header--ranking {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.carousel3d-panel-header--reserve1 {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.carousel3d-panel-header--reserve2 {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.carousel3d-panel-header--reserve3 {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.carousel3d-panel-header--reserve4 {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* パネルボディ */
.carousel3d-panel-body {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* パネル内リスト */
.carousel3d-panel-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* リストアイテム */
.carousel3d-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #f8fafc;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.carousel3d-list-item:hover {
  background: #e8f4fd;
  transform: translateX(4px);
}

/* ランク番号 */
.carousel3d-list-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e4e6eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #65676b;
  flex-shrink: 0;
}

.carousel3d-list-rank--1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color: #ffffff;
}

.carousel3d-list-rank--1 i {
  font-size: 0.75rem;
  color: #ffffff;
}

.carousel3d-list-rank--2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
  color: #ffffff;
}

.carousel3d-list-rank--3 {
  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
  color: #ffffff;
}

/* リスト画像 */
.carousel3d-list-image {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e4e6eb;
}

.carousel3d-list-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel3d-list-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%);
}

.carousel3d-list-placeholder i {
  font-size: 1.2rem;
  color: #1877f2;
  opacity: 0.5;
}

/* リスト情報 */
.carousel3d-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.carousel3d-list-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1c1e21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel3d-list-meta {
  font-size: 0.75rem;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel3d-list-meta i {
  color: #1877f2;
  font-size: 0.7rem;
}

.carousel3d-list-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空状態 */
.carousel3d-panel-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #65676b;
  text-align: center;
  padding: 20px;
}

.carousel3d-panel-empty i {
  font-size: 3rem;
  color: #d8dadf;
  margin-bottom: 12px;
}

.carousel3d-panel-empty p {
  font-size: 0.95rem;
  margin: 0;
}

/* Coming Soon表示 */
.carousel3d-panel-coming-soon {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
}

.carousel3d-panel-coming-soon i {
  font-size: 3rem;
  color: #d8dadf;
  margin-bottom: 16px;
}

.carousel3d-panel-coming-soon p {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1e21;
  margin: 0 0 8px 0;
}

.carousel3d-panel-coming-soon span {
  font-size: 0.9rem;
  color: #65676b;
}

/* インジケーター */
.carousel3d-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 200;
}

.carousel3d-indicator {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.carousel3d-indicator:hover {
  background: rgba(0, 0, 0, 0.4);
  transform: scale(1.2);
}

.carousel3d-indicator.active {
  background: #1877f2;
  transform: scale(1.2);
}

/* ナビゲーションボタン */
.carousel3d-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1877f2;
  transition: all 0.2s ease;
  z-index: 200;
}

.carousel3d-nav:hover {
  background: #ffffff;
  box-shadow: 0 6px 24px rgba(24, 119, 242, 0.2);
  transform: translateY(-50%) scale(1.1);
}

.carousel3d-nav:active {
  transform: translateY(-50%) scale(0.95);
}

.carousel3d-nav svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.carousel3d-prev {
  left: 10px;
}

.carousel3d-next {
  right: 10px;
}

/* =====================================
   レスポンシブ対応
   ===================================== */

/* タブレット */
@media (max-width: 768px) {
  .carousel3d-container {
    height: 340px;
  }

  .carousel3d-panel {
    width: 240px;
    height: 280px;
  }

  .carousel3d-panel-header {
    padding: 14px 16px;
  }

  .carousel3d-panel-header h3 {
    font-size: 1rem;
  }

  .carousel3d-panel-body {
    padding: 10px;
  }

  .carousel3d-list-item {
    padding: 6px 8px;
    gap: 8px;
  }

  .carousel3d-list-image {
    width: 40px;
    height: 40px;
  }

  .carousel3d-list-name {
    font-size: 0.85rem;
  }

  .carousel3d-list-meta {
    font-size: 0.7rem;
  }

  .carousel3d-nav {
    width: 40px;
    height: 40px;
  }

  .carousel3d-nav svg {
    width: 18px;
    height: 18px;
  }

  .carousel3d-prev {
    left: 5px;
  }

  .carousel3d-next {
    right: 5px;
  }
}

/* スマートフォン - タイトルのみのミニマム表示 */
@media (max-width: 480px) {
  .carousel3d-container {
    height: 180px;
    perspective: 600px;
  }

  .carousel3d-panel {
    width: 100px;
    height: 100px;
  }

  .carousel3d-panel-inner {
    border-radius: 12px;
    justify-content: center;
  }

  /* パネルボディ（詳細部分）を非表示 */
  .carousel3d-panel-body {
    display: none;
  }

  /* ヘッダーをパネル全体に */
  .carousel3d-panel-header {
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 12px 8px;
    gap: 8px;
    border-radius: 12px;
  }

  .carousel3d-panel-header i {
    font-size: 1.5rem;
  }

  .carousel3d-panel-header svg {
    width: 1.5rem;
    height: 1.5rem;
  }

  .carousel3d-panel-header h3 {
    font-size: 0.7rem;
    line-height: 1.2;
  }

  .carousel3d-indicators {
    gap: 5px;
    bottom: 5px;
  }

  .carousel3d-indicator {
    width: 6px;
    height: 6px;
  }

  .carousel3d-nav {
    width: 28px;
    height: 28px;
  }

  .carousel3d-nav svg {
    width: 12px;
    height: 12px;
  }

  .carousel3d-prev {
    left: 5px;
  }

  .carousel3d-next {
    right: 5px;
  }
}

/* iPhone SE / 小さいスマートフォン - タイトルのみミニマム表示 */
@media (max-width: 321px) {
  .carousel3d-container {
    height: 160px;
    perspective: 500px;
  }

  .carousel3d-panel {
    width: 85px;
    height: 85px;
  }

  .carousel3d-panel-header {
    padding: 10px 6px;
    gap: 6px;
  }

  .carousel3d-panel-header i {
    font-size: 1.2rem;
  }

  .carousel3d-panel-header svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  .carousel3d-panel-header h3 {
    font-size: 0.6rem;
  }

  .carousel3d-nav {
    width: 24px;
    height: 24px;
  }

  .carousel3d-nav svg {
    width: 10px;
    height: 10px;
  }

  .carousel3d-indicator {
    width: 5px;
    height: 5px;
  }
}

/* =====================================
   3Dカルーセルモーダル（ミニマム表示）
   ===================================== */

/* モーダルオーバーレイ（暗い背景） */
.carousel3d-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.90);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.carousel3d-modal.hidden {
  display: none;
}

/* モーダル内のカルーセルラッパー */
.carousel3d-modal-wrapper {
  width: 100%;
  max-width: 100%;
  height: 100%;
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダル内のカルーセルコンテナ（PC: 画面いっぱい表示） */
.carousel3d-modal .carousel3d-container {
  height: 500px;
  perspective: 1200px;
  width: 100%;
  max-width: 1200px;
}

/* モーダル内のパネル（PC: 大きく表示） */
.carousel3d-modal .carousel3d-panel {
  width: 200px;
  height: 200px;
}

.carousel3d-modal .carousel3d-panel-inner {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  justify-content: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

/* パネルボディ（詳細部分）を非表示 */
.carousel3d-modal .carousel3d-panel-body {
  display: none;
}

/* ヘッダーをパネル全体に */
.carousel3d-modal .carousel3d-panel-header {
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 15px;
  gap: 12px;
  border-radius: 20px;
}

.carousel3d-modal .carousel3d-panel-header i {
  font-size: 3rem;
}

.carousel3d-modal .carousel3d-fish-icon {
  width: 3.5rem;
  height: 2.5rem;
}

.carousel3d-modal .carousel3d-panel-header h3 {
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
}

/* 閉じるボタン */
.carousel3d-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1001;
}

.carousel3d-modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.carousel3d-modal-close svg {
  width: 24px;
  height: 24px;
  stroke: #ffffff;
}

/* モーダル内のナビゲーションボタン（PC: 大きく） */
.carousel3d-modal .carousel3d-nav {
  background: rgba(255, 255, 255, 0.9);
  width: 56px;
  height: 56px;
}

.carousel3d-modal .carousel3d-nav svg {
  width: 28px;
  height: 28px;
}

.carousel3d-modal .carousel3d-nav:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.carousel3d-modal .carousel3d-prev {
  left: 40px;
}

.carousel3d-modal .carousel3d-next {
  right: 40px;
}

/* モーダル内のインジケーター（PC: 大きく） */
.carousel3d-modal .carousel3d-indicators {
  bottom: 30px;
  gap: 12px;
}

.carousel3d-modal .carousel3d-indicator {
  background: rgba(255, 255, 255, 0.4);
  width: 12px;
  height: 12px;
}

.carousel3d-modal .carousel3d-indicator.active {
  background: #ffffff;
}

/* タブレット */
@media (max-width: 768px) {
  .carousel3d-modal-wrapper {
    padding: 20px;
    max-width: 100%;
  }

  .carousel3d-modal .carousel3d-container {
    height: 280px;
    perspective: 600px;
  }

  .carousel3d-modal .carousel3d-panel {
    width: 100px;
    height: 100px;
  }

  .carousel3d-modal .carousel3d-panel-inner {
    border-radius: 14px;
  }

  .carousel3d-modal .carousel3d-panel-header {
    padding: 12px 8px;
    gap: 8px;
    border-radius: 14px;
  }

  .carousel3d-modal .carousel3d-panel-header i {
    font-size: 1.8rem;
  }

  .carousel3d-modal .carousel3d-panel-header h3 {
    font-size: 0.7rem;
  }

  .carousel3d-modal .carousel3d-nav {
    width: 40px;
    height: 40px;
  }

  .carousel3d-modal .carousel3d-nav svg {
    width: 18px;
    height: 18px;
  }

  .carousel3d-modal .carousel3d-prev {
    left: 15px;
  }

  .carousel3d-modal .carousel3d-next {
    right: 15px;
  }

  .carousel3d-modal .carousel3d-indicators {
    bottom: 15px;
    gap: 8px;
  }

  .carousel3d-modal .carousel3d-indicator {
    width: 8px;
    height: 8px;
  }

  .carousel3d-modal-close {
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
  }

  .carousel3d-modal-close svg {
    width: 20px;
    height: 20px;
  }
}

/* スマートフォン */
@media (max-width: 480px) {
  .carousel3d-modal-wrapper {
    padding: 10px;
    max-width: 100%;
  }

  .carousel3d-modal .carousel3d-container {
    height: 220px;
    perspective: 500px;
  }

  .carousel3d-modal .carousel3d-panel {
    width: 85px;
    height: 85px;
  }

  .carousel3d-modal .carousel3d-panel-header {
    padding: 10px 6px;
    gap: 6px;
  }

  .carousel3d-modal .carousel3d-panel-header i {
    font-size: 1.4rem;
  }

  .carousel3d-modal .carousel3d-panel-header h3 {
    font-size: 0.6rem;
  }

  .carousel3d-modal .carousel3d-nav {
    width: 32px;
    height: 32px;
  }

  .carousel3d-modal .carousel3d-nav svg {
    width: 14px;
    height: 14px;
  }

  .carousel3d-modal .carousel3d-indicator {
    width: 6px;
    height: 6px;
  }

  .carousel3d-modal-close {
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
  }

  .carousel3d-modal-close svg {
    width: 18px;
    height: 18px;
  }
}

/* iPhone SE */
@media (max-width: 321px) {
  .carousel3d-modal-wrapper {
    max-width: 100%;
  }

  .carousel3d-modal .carousel3d-container {
    height: 180px;
    perspective: 400px;
  }

  .carousel3d-modal .carousel3d-panel {
    width: 70px;
    height: 70px;
  }

  .carousel3d-modal .carousel3d-panel-header {
    padding: 8px 5px;
    gap: 4px;
  }

  .carousel3d-modal .carousel3d-panel-header i {
    font-size: 1.2rem;
  }

  .carousel3d-modal .carousel3d-panel-header h3 {
    font-size: 0.5rem;
  }

  .carousel3d-modal .carousel3d-nav {
    width: 28px;
    height: 28px;
  }

  .carousel3d-modal .carousel3d-nav svg {
    width: 12px;
    height: 12px;
  }

  .carousel3d-modal .carousel3d-indicator {
    width: 5px;
    height: 5px;
  }

  .carousel3d-modal-close {
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
  }

  .carousel3d-modal-close svg {
    width: 16px;
    height: 16px;
  }
}

/* =====================================
   詳細モーダル
   ===================================== */

/* クリック可能なパネル */
.carousel3d-panel--clickable {
  cursor: pointer;
}

.carousel3d-panel--clickable:hover .carousel3d-panel-inner {
  transform: scale(1.05);
}

/* 詳細モーダルオーバーレイ */
.carousel3d-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.carousel3d-detail-modal.hidden {
  display: none;
}

/* 詳細モーダルコンテンツ */
.carousel3d-detail-content {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 幅広バージョン（旧モーダル内容用） */
.carousel3d-detail-content--wide {
  max-width: 600px;
}

/* 詳細モーダルヘッダー */
.carousel3d-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #1877f2 0%, #0d5bbd 100%);
  color: #ffffff;
}

.carousel3d-detail-header--ranking {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
}

.carousel3d-detail-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.carousel3d-detail-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.carousel3d-detail-close:hover {
  background: rgba(255, 255, 255, 0.3);
}

.carousel3d-detail-close svg {
  width: 18px;
  height: 18px;
  stroke: #ffffff;
}

/* 詳細モーダルボディ */
.carousel3d-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  position: relative;
}

/* 詳細リスト */
.carousel3d-detail-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 詳細アイテム */
.carousel3d-detail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.carousel3d-detail-item:hover {
  background: #e8f4fd;
  transform: translateX(4px);
}

/* ランク */
.carousel3d-detail-rank {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e4e6eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #65676b;
  flex-shrink: 0;
}

.carousel3d-detail-rank--1 {
  background: linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
  color: #ffffff;
}

.carousel3d-detail-rank--1 i {
  font-size: 0.9rem;
}

.carousel3d-detail-rank--2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
  color: #ffffff;
}

.carousel3d-detail-rank--3 {
  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
  color: #ffffff;
}

/* 画像 */
.carousel3d-detail-image {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: #e4e6eb;
}

.carousel3d-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel3d-detail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f4fd 0%, #dbeafe 100%);
}

.carousel3d-detail-placeholder i {
  font-size: 1.5rem;
  color: #1877f2;
  opacity: 0.5;
}

/* 情報 */
.carousel3d-detail-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.carousel3d-detail-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1c1e21;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel3d-detail-meta {
  font-size: 0.85rem;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 6px;
}

.carousel3d-detail-meta i {
  color: #1877f2;
}

.carousel3d-detail-user {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 空状態 */
.carousel3d-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #65676b;
  text-align: center;
}

.carousel3d-detail-empty i {
  font-size: 3rem;
  color: #d8dadf;
  margin-bottom: 16px;
}

.carousel3d-detail-empty p {
  font-size: 1rem;
  margin: 0;
}

/* レスポンシブ */
@media (max-width: 480px) {
  .carousel3d-detail-modal {
    padding: 10px;
  }

  .carousel3d-detail-content {
    max-height: 85vh;
    border-radius: 12px;
  }

  .carousel3d-detail-header {
    padding: 14px 16px;
  }

  .carousel3d-detail-header h3 {
    font-size: 1rem;
  }

  .carousel3d-detail-body {
    padding: 12px;
  }

  .carousel3d-detail-item {
    padding: 10px;
    gap: 10px;
  }

  .carousel3d-detail-image {
    width: 48px;
    height: 48px;
  }

  .carousel3d-detail-name {
    font-size: 0.9rem;
  }

  .carousel3d-detail-meta {
    font-size: 0.8rem;
  }
}

/* =====================================
   モーダル内カルーセル用の調整
   ===================================== */

/* モーダル内のカルーセルボディ */
.carousel3d-modal-body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: visible;
}

.carousel3d-modal-body .weekly-fish-summary {
  margin: 12px 16px;
}

.carousel3d-modal-body .carousel3d-container {
  position: relative;
  margin: 0 auto;
}

/* =====================================
   サポーター（ご協力のお願い）パネル
   ===================================== */

/* ヘッダーカラー */
.carousel3d-panel-header--supporter {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

/* 詳細モーダルヘッダー */
.carousel3d-detail-header--supporter {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

/* パネル内プレビュー */
.carousel3d-panel-supporter-preview {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  gap: 12px;
}

.supporter-preview-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.supporter-preview-icon i {
  font-size: 1.5rem;
  color: #ec4899;
}

.supporter-preview-message {
  font-size: 0.9rem;
  color: #1c1e21;
  line-height: 1.5;
  margin: 0;
}

.supporter-preview-avatars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}

.supporter-preview-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  margin-left: -8px;
}

.supporter-preview-avatar:first-child {
  margin-left: 0;
}

.supporter-preview-more {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e4e6eb;
  color: #65676b;
  font-size: 0.65rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  margin-left: -8px;
}

.supporter-preview-tap-hint {
  font-size: 0.75rem;
  color: #65676b;
  margin-top: 4px;
}

/* 詳細モーダルボディ */
.supporter-detail-body {
  padding: 20px;
}

.supporter-detail-body .supporter-slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.supporter-detail-body .supporter-slide-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.supporter-detail-body .supporter-slide-icon i {
  font-size: 2rem;
  color: #ec4899;
}

/* レスポンシブ（スマホ：パネルボディ非表示） */
@media (max-width: 480px) {
  .carousel3d-panel-supporter-preview {
    display: none;
  }
}

/* =====================================
   料理（みんなの料理）パネル
   ===================================== */

/* ヘッダーカラー */
.carousel3d-panel-header--cuisine {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

/* 詳細モーダルヘッダー */
.carousel3d-detail-header--cuisine {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
}

/* 料理モーダルコンテンツ（横幅広め） */
.carousel3d-detail-content--cuisine {
  max-width: 700px;
  height: 80vh;
  max-height: 80vh;
}

.carousel3d-detail-content--cuisine .carousel3d-detail-body {
  min-height: 300px;
}

@media (max-width: 480px) {
  .carousel3d-detail-content--cuisine {
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
  }
}

/* 料理件数バッジ */
.cuisine-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  margin-left: 8px;
}

/* 料理グリッド（パネル内） */
.carousel3d-cuisine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
}

.carousel3d-cuisine-item {
  aspect-ratio: 1;
  border-radius: 6px;
  overflow: hidden;
  background: #e4e6eb;
}

.carousel3d-cuisine-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel3d-cuisine-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef3e2 0%, #fde9d0 100%);
}

.carousel3d-cuisine-placeholder svg {
  color: #e67e22;
  opacity: 0.5;
}

/* パネルフッターテキスト */
.carousel3d-panel-footer-text {
  text-align: center;
  font-size: 0.75rem;
  color: #65676b;
  padding: 8px 0 4px;
}

/* =====================================
   料理ギャラリー - スタイル切り替え対応
   data-style属性で切り替え:
   - "default": 基本グリッド
   - "card": レシピカード風
   - "pinterest": Pinterest風マソンリー
   ===================================== */

/* === 共通スタイル === */
.cuisine-gallery-grid {
  display: grid;
  gap: 12px;
  padding: 4px;
  min-height: 200px;
}

.cuisine-gallery-item {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  display: block;
  background: #e4e6eb;
}

.cuisine-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cuisine-gallery-no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef3e2 0%, #fde9d0 100%);
}

.cuisine-gallery-no-image svg {
  color: #e67e22;
  opacity: 0.5;
}

/* === デフォルトスタイル（1列リスト） === */
.cuisine-gallery-grid:not([data-style]),
.cuisine-gallery-grid[data-style="default"] {
  grid-template-columns: 1fr;
  gap: 16px;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-item,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #ffffff;
  overflow: hidden;
  height: 120px;
  max-width: 100%;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-image-wrapper,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-image-wrapper {
  position: relative;
  width: 140px;
  min-width: 140px;
  overflow: hidden;
  flex-shrink: 0;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-image-wrapper img,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-item:hover,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-item:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 20px rgba(230, 126, 34, 0.15);
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-item:hover img,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-item:hover img {
  transform: scale(1.08);
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-overlay,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-overlay {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  background: #ffffff;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-title,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1c1e21;
  white-space: normal;
  line-height: 1.4;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-fish,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-fish {
  font-size: 0.9rem;
  color: #e67e22;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-user,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-user {
  font-size: 0.8rem;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* SVGアイコン共通スタイル */
.cuisine-gallery-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ユーザーアバター画像 */
.cuisine-gallery-user-avatar {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 初心者マーク */
.cuisine-gallery-beginner-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* デフォルトスタイルではバッジを表示 */
.cuisine-gallery-grid:not([data-style]) .cuisine-gallery-badge,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(230, 126, 34, 0.95);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
}


/* === 共通オーバーレイテキストスタイル === */
.cuisine-gallery-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cuisine-gallery-fish {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* === 無限スクロール用要素 === */

/* センチネル（スクロール検知用） */
.cuisine-gallery-sentinel {
  height: 20px;
  width: 100%;
}

/* ローダー */
.cuisine-gallery-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  color: #65676b;
  font-size: 0.9rem;
  min-height: 150px;
}

.cuisine-gallery-loader.hidden {
  display: none;
}

/* グリッドが空の時にローダーを中央に表示 */
.cuisine-gallery-grid:empty + .cuisine-gallery-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cuisine-gallery-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e4e6eb;
  border-top-color: #e67e22;
  border-radius: 50%;
  animation: cuisine-spin 0.8s linear infinite;
}

@keyframes cuisine-spin {
  to {
    transform: rotate(360deg);
  }
}

/* === レスポンシブ === */
@media (max-width: 600px) {
  .cuisine-gallery-grid:not([data-style]),
  .cuisine-gallery-grid[data-style="default"] {
    gap: 12px;
  }

  .cuisine-gallery-grid:not([data-style]) .cuisine-gallery-item,
  .cuisine-gallery-grid[data-style="default"] .cuisine-gallery-item {
    height: 100px;
  }

  .cuisine-gallery-grid:not([data-style]) .cuisine-gallery-image-wrapper,
  .cuisine-gallery-grid[data-style="default"] .cuisine-gallery-image-wrapper {
    width: 100px;
    min-width: 100px;
  }

  .cuisine-gallery-grid:not([data-style]) .cuisine-gallery-overlay,
  .cuisine-gallery-grid[data-style="default"] .cuisine-gallery-overlay {
    padding: 12px 14px;
  }

  .cuisine-gallery-grid:not([data-style]) .cuisine-gallery-title,
  .cuisine-gallery-grid[data-style="default"] .cuisine-gallery-title {
    font-size: 1rem;
  }

  .cuisine-gallery-grid:not([data-style]) .cuisine-gallery-fish,
  .cuisine-gallery-grid[data-style="default"] .cuisine-gallery-fish {
    font-size: 0.85rem;
  }

}

/* ==============================================================================
   ジャンルフィルターボタン（料理ギャラリー用）
   ============================================================================== */
.cuisine-genre-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(to bottom, rgba(230, 126, 34, 0.05), transparent);
  border-bottom: 1px solid rgba(230, 126, 34, 0.1);
}

.cuisine-genre-filter-btn {
  padding: 6px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 20px;
  background: #fff;
  color: #606770;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.cuisine-genre-filter-btn:hover {
  border-color: #e67e22;
  color: #e67e22;
  background: rgba(230, 126, 34, 0.05);
}

.cuisine-genre-filter-btn.active {
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 6px rgba(230, 126, 34, 0.3);
}

.cuisine-genre-filter-btn.active:hover {
  background: linear-gradient(135deg, #d35400 0%, #c0392b 100%);
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
  .cuisine-genre-filter {
    gap: 6px;
    padding: 10px 12px;
  }

  .cuisine-genre-filter-btn {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 360px) {
  .cuisine-genre-filter {
    gap: 4px;
    padding: 8px 10px;
  }

  .cuisine-genre-filter-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
}

/* ==============================================================================
   料理詳細モーダル（ギャラリーから開く）
   ============================================================================== */
.cuisine-detail-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.cuisine-detail-modal.hidden {
  display: none;
}

.cuisine-detail-modal-opening {
  animation: cuisineDetailFadeIn 0.3s ease;
}

.cuisine-detail-modal-closing {
  animation: cuisineDetailFadeOut 0.2s ease;
}

@keyframes cuisineDetailFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cuisineDetailFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.cuisine-detail-modal-content {
  background: #ffffff;
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 85vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* 閉じるボタン */
.cuisine-detail-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.2s ease;
}

.cuisine-detail-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* 画像 */
.cuisine-detail-image-wrapper {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: #f0f0f0;
}

.cuisine-detail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 情報パネル */
.cuisine-detail-info {
  padding: 20px;
}

.cuisine-detail-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: #1c1e21;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.cuisine-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.cuisine-detail-fish {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e67e22;
  font-weight: 600;
  font-size: 0.95rem;
}

.cuisine-detail-user {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #65676b;
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.cuisine-detail-user:hover {
  color: #1877f2;
}

/* モーダル内ユーザーアバター */
.cuisine-detail-user-avatar {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  vertical-align: middle;
}

/* 説明文 */
.cuisine-detail-description {
  margin-bottom: 16px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.cuisine-detail-description p {
  margin: 0;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* 材料リスト */
.cuisine-detail-ingredients {
  margin-bottom: 16px;
}

.cuisine-detail-ingredients h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1c1e21;
  margin: 0 0 10px 0;
}

.cuisine-detail-ingredients ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cuisine-detail-ingredients li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #e4e6eb;
  font-size: 0.9rem;
}

.cuisine-detail-ingredients li:last-child {
  border-bottom: none;
}

.cuisine-detail-ingredients .ingredient-name {
  color: #1c1e21;
}

.cuisine-detail-ingredients .ingredient-amount {
  color: #65676b;
}

/* アクションボタン */
.cuisine-detail-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e4e6eb;
}

.cuisine-detail-report-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #e67e22 0%, #d35400 100%);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cuisine-detail-report-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

/* ローディング・エラー状態 */
.cuisine-detail-loading,
.cuisine-detail-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
  color: #65676b;
  font-size: 0.95rem;
}

.cuisine-detail-error p {
  margin: 0;
}

.cuisine-detail-close-btn {
  padding: 10px 20px;
  background: #e4e6eb;
  border: none;
  border-radius: 8px;
  color: #1c1e21;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.cuisine-detail-close-btn:hover {
  background: #d8dadf;
}

/* レスポンシブ対応: モバイル */
@media (max-width: 480px) {
  .cuisine-detail-modal {
    padding: 10px;
  }

  .cuisine-detail-modal-content {
    max-height: 90vh;
    border-radius: 12px;
  }

  .cuisine-detail-info {
    padding: 16px;
  }

  .cuisine-detail-title {
    font-size: 1.15rem;
  }
}

/* レスポンシブ対応: デスクトップ横並びレイアウト */
@media (min-width: 769px) {
  .cuisine-detail-modal-content {
    display: flex;
    flex-direction: row;
    max-width: 900px;
    height: 500px;
    max-height: 80vh;
    overflow: hidden;
  }

  .cuisine-detail-image-wrapper {
    width: 400px;
    min-width: 400px;
    max-width: 400px;
    flex-shrink: 0;
    aspect-ratio: unset;
    height: 100%;
  }

  .cuisine-detail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cuisine-detail-info {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    padding: 24px;
    box-sizing: border-box;
  }
}

/* ==============================================================================
   料理詳細モーダル内のナイスフィッシュボタン - 海の世界（ミニ版）
   ============================================================================== */
.cuisine-detail-reaction {
  position: relative;
  margin-bottom: 16px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #0369a1 100%);
  border-radius: 10px;
  overflow: hidden;
  min-height: 70px;
}

.cuisine-detail-reaction.is-owner .cuisine-reaction-button {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ==============================================================================
   海のシーン（ミニ版）
   ============================================================================== */
.cm-ocean-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

/* 泡 */
.cm-bubbles {
  position: absolute;
  inset: 0;
}

.cm-bubble {
  position: absolute;
  bottom: -10px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

/* 泡はリアクションがある時に表示 */
.cuisine-detail-reaction:not([data-creature-type="none"]) .cm-bubble {
  opacity: 1;
}

.cm-bubble-1 { left: 10%; width: 4px; height: 4px; animation: cm-bubble-rise-1 5s ease-in-out infinite 0.3s; }
.cm-bubble-2 { left: 30%; width: 3px; height: 3px; animation: cm-bubble-rise-2 7s ease-in-out infinite 2.1s; }
.cm-bubble-3 { left: 50%; width: 4px; height: 4px; animation: cm-bubble-rise-3 6s ease-in-out infinite 4.7s; }
.cm-bubble-4 { left: 70%; width: 2px; height: 2px; animation: cm-bubble-rise-4 8s ease-in-out infinite 1.3s; }
.cm-bubble-5 { left: 85%; width: 3px; height: 3px; animation: cm-bubble-rise-5 5.5s ease-in-out infinite 6.2s; }

@keyframes cm-bubble-rise-1 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  10% { transform: translateY(-5px) translateX(1px) scale(1); opacity: 0.7; }
  90% { transform: translateY(-60px) translateX(2px) scale(0.6); opacity: 0.2; }
}

@keyframes cm-bubble-rise-2 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  15% { transform: translateY(-7px) translateX(-1px) scale(1); opacity: 0.6; }
  85% { transform: translateY(-55px) translateX(-1px) scale(0.5); opacity: 0.1; }
}

@keyframes cm-bubble-rise-3 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  12% { transform: translateY(-6px) translateX(2px) scale(1); opacity: 0.65; }
  88% { transform: translateY(-50px) translateX(1px) scale(0.55); opacity: 0.15; }
}

@keyframes cm-bubble-rise-4 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  8% { transform: translateY(-4px) translateX(-2px) scale(1); opacity: 0.55; }
  92% { transform: translateY(-58px) translateX(-2px) scale(0.45); opacity: 0.1; }
}

@keyframes cm-bubble-rise-5 {
  0%, 100% { transform: translateY(0) translateX(0) scale(0); opacity: 0; }
  18% { transform: translateY(-9px) translateX(1px) scale(1); opacity: 0.6; }
  86% { transform: translateY(-52px) translateX(2px) scale(0.52); opacity: 0.12; }
}

/* 海藻 */
.cm-seaweed {
  position: absolute;
  bottom: 0;
  display: flex;
  gap: 2px;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cm-seaweed-left { left: 6px; }
.cm-seaweed-right { right: 6px; }

/* 海藻は群れ以上で表示 */
.cuisine-detail-reaction[data-creature-type="school"] .cm-seaweed,
.cuisine-detail-reaction[data-creature-type="swarm"] .cm-seaweed,
.cuisine-detail-reaction[data-creature-type="shark"] .cm-seaweed,
.cuisine-detail-reaction[data-creature-type="whale"] .cm-seaweed {
  opacity: 1;
}

.cm-seaweed-blade {
  width: 4px;
  background: linear-gradient(to top, #15803d, #22c55e);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
  animation: cm-seaweed-sway 3s ease-in-out infinite;
}

.cm-seaweed-left .cm-blade-1 { height: 18px; animation-delay: 0s; }
.cm-seaweed-left .cm-blade-2 { height: 26px; animation-delay: 0.3s; }
.cm-seaweed-left .cm-blade-3 { height: 14px; animation-delay: 0.6s; }

.cm-seaweed-right .cm-blade-1 { height: 16px; animation-delay: 0.2s; }
.cm-seaweed-right .cm-blade-2 { height: 24px; animation-delay: 0.5s; }
.cm-seaweed-right .cm-blade-3 { height: 12px; animation-delay: 0.8s; }

@keyframes cm-seaweed-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ==============================================================================
   個別の魚（1-9匹）
   ============================================================================== */
.cm-swimming-fish-group {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cuisine-detail-reaction[data-creature-type="individual"] .cm-swimming-fish-group {
  opacity: 1;
}

.cm-swimming-fish {
  position: absolute;
  width: 18px;
  height: 12px;
  animation: cm-fish-swim 8s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.cm-swimming-fish svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

/* data-fish-count に応じて魚を表示 */
.cuisine-detail-reaction[data-fish-count="1"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="2"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="2"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="3"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="3"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="3"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="4"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="4"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="4"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="4"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="5"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="5"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="5"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="5"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="5"] .cm-swimming-fish-5,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-5,
.cuisine-detail-reaction[data-fish-count="6"] .cm-swimming-fish-6,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-5,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-6,
.cuisine-detail-reaction[data-fish-count="7"] .cm-swimming-fish-7,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-5,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-6,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-7,
.cuisine-detail-reaction[data-fish-count="8"] .cm-swimming-fish-8,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-1,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-2,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-3,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-4,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-5,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-6,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-7,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-8,
.cuisine-detail-reaction[data-fish-count="9"] .cm-swimming-fish-9 {
  opacity: 1;
}

/* 個別の魚の位置とタイミング */
.cm-swimming-fish-1 { top: 20%; animation-delay: -0s; animation-duration: 7s; }
.cm-swimming-fish-2 { top: 50%; animation-delay: -4s; animation-duration: 9s; }
.cm-swimming-fish-3 { top: 35%; animation-delay: -2s; animation-duration: 8s; }
.cm-swimming-fish-4 { top: 65%; animation-delay: -5s; animation-duration: 7.5s; }
.cm-swimming-fish-5 { top: 12%; animation-delay: -6s; animation-duration: 8.5s; }
.cm-swimming-fish-6 { top: 55%; animation-delay: -3s; animation-duration: 9.5s; }
.cm-swimming-fish-7 { top: 30%; animation-delay: -7s; animation-duration: 7.2s; }
.cm-swimming-fish-8 { top: 75%; animation-delay: -1s; animation-duration: 8.8s; }
.cm-swimming-fish-9 { top: 43%; animation-delay: -4.5s; animation-duration: 6.8s; }

@keyframes cm-fish-swim {
  0% { left: -20px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 20px); transform: translateY(-5px) scaleX(1); }
  50% { left: calc(100% + 20px); transform: translateY(0) scaleX(-1); }
  98% { left: -20px; transform: translateY(5px) scaleX(-1); }
  100% { left: -20px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   魚のまとまり（10-49匹）
   ============================================================================== */
.cm-fish-school {
  position: absolute;
  inset: 0;
  animation: cm-school-move 12s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cuisine-detail-reaction[data-creature-type="school"] .cm-fish-school {
  opacity: 1;
}

.cm-school-fish {
  position: absolute;
  width: 12px;
  height: 8px;
}

.cm-school-fish svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.8);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.08));
}

.cm-school-fish-1 { top: 25%; left: 15%; animation: cm-school-fish-wiggle 1.5s ease-in-out infinite 0s; }
.cm-school-fish-2 { top: 30%; left: 20%; animation: cm-school-fish-wiggle 1.6s ease-in-out infinite 0.1s; }
.cm-school-fish-3 { top: 35%; left: 17%; animation: cm-school-fish-wiggle 1.4s ease-in-out infinite 0.2s; }
.cm-school-fish-4 { top: 40%; left: 23%; animation: cm-school-fish-wiggle 1.7s ease-in-out infinite 0.15s; }
.cm-school-fish-5 { top: 33%; left: 25%; animation: cm-school-fish-wiggle 1.55s ease-in-out infinite 0.25s; }
.cm-school-fish-6 { top: 27%; left: 27%; animation: cm-school-fish-wiggle 1.45s ease-in-out infinite 0.05s; }
.cm-school-fish-7 { top: 45%; left: 19%; animation: cm-school-fish-wiggle 1.65s ease-in-out infinite 0.3s; }
.cm-school-fish-8 { top: 37%; left: 13%; animation: cm-school-fish-wiggle 1.5s ease-in-out infinite 0.12s; }
.cm-school-fish-9 { top: 23%; left: 21%; animation: cm-school-fish-wiggle 1.58s ease-in-out infinite 0.22s; }
.cm-school-fish-10 { top: 50%; left: 25%; animation: cm-school-fish-wiggle 1.42s ease-in-out infinite 0.08s; }
.cm-school-fish-11 { top: 43%; left: 30%; animation: cm-school-fish-wiggle 1.52s ease-in-out infinite 0.18s; }
.cm-school-fish-12 { top: 31%; left: 10%; animation: cm-school-fish-wiggle 1.62s ease-in-out infinite 0.28s; }

@keyframes cm-school-move {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(calc(100% - 60px)); }
}

@keyframes cm-school-fish-wiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-1px) rotate(2deg); }
  75% { transform: translateY(1px) rotate(-2deg); }
}

/* ==============================================================================
   魚の大群（50-99匹）
   ============================================================================== */
.cm-fish-swarm {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.cuisine-detail-reaction[data-creature-type="swarm"] .cm-fish-swarm {
  opacity: 1;
  visibility: visible;
  animation: cm-swarm-flow 8s linear infinite;
}

.cm-swarm-fish {
  position: absolute;
  width: 10px;
  height: 7px;
}

.cm-swarm-fish svg {
  width: 100%;
  height: 100%;
  fill: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.05));
}

.cm-swarm-fish-1 { top: 8%; left: 4%; }
.cm-swarm-fish-2 { top: 16%; left: 10%; }
.cm-swarm-fish-3 { top: 12%; left: 16%; }
.cm-swarm-fish-4 { top: 20%; left: 7%; }
.cm-swarm-fish-5 { top: 25%; left: 12%; }
.cm-swarm-fish-6 { top: 30%; left: 4%; }
.cm-swarm-fish-7 { top: 35%; left: 15%; }
.cm-swarm-fish-8 { top: 40%; left: 8%; }
.cm-swarm-fish-9 { top: 45%; left: 18%; }
.cm-swarm-fish-10 { top: 50%; left: 6%; }
.cm-swarm-fish-11 { top: 55%; left: 12%; }
.cm-swarm-fish-12 { top: 60%; left: 20%; }
.cm-swarm-fish-13 { top: 65%; left: 10%; }
.cm-swarm-fish-14 { top: 70%; left: 16%; }
.cm-swarm-fish-15 { top: 75%; left: 7%; }
.cm-swarm-fish-16 { top: 14%; left: 23%; }
.cm-swarm-fish-17 { top: 23%; left: 20%; }
.cm-swarm-fish-18 { top: 33%; left: 23%; }
.cm-swarm-fish-19 { top: 43%; left: 25%; }
.cm-swarm-fish-20 { top: 53%; left: 27%; }
.cm-swarm-fish-21 { top: 63%; left: 25%; }
.cm-swarm-fish-22 { top: 18%; left: 30%; }
.cm-swarm-fish-23 { top: 38%; left: 30%; }
.cm-swarm-fish-24 { top: 58%; left: 33%; }
.cm-swarm-fish-25 { top: 78%; left: 30%; }

@keyframes cm-swarm-flow {
  0% { transform: translateX(-30px); opacity: 0; }
  5% { transform: translateX(-20px); opacity: 1; }
  95% { transform: translateX(calc(100% + 20px)); opacity: 1; }
  100% { transform: translateX(calc(100% + 30px)); opacity: 0; }
}

/* ==============================================================================
   サメ（100-499匹）
   ============================================================================== */
.cm-shark-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: cm-shark-swim 10s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cuisine-detail-reaction[data-creature-type="shark"] .cm-shark-container {
  opacity: 1;
}

.cm-shark-svg {
  width: 50px;
  height: 30px;
  fill: #64748b;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
  transform: scaleX(-1);
}

@keyframes cm-shark-swim {
  0%, 100% { transform: translateX(-60px) scaleX(1); }
  45% { transform: translateX(calc(100% + 10px)) scaleX(1); }
  50% { transform: translateX(calc(100% + 10px)) scaleX(-1); }
  95% { transform: translateX(-60px) scaleX(-1); }
}

/* ==============================================================================
   クジラ（500+匹）
   ============================================================================== */
.cm-whale-container {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  animation: cm-whale-swim 15s ease-in-out infinite;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.cuisine-detail-reaction[data-creature-type="whale"] .cm-whale-container {
  opacity: 1;
}

.cm-whale-svg {
  width: 70px;
  height: 40px;
  fill: #334155;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
  transform: scaleX(-1);
}

@keyframes cm-whale-swim {
  0%, 100% { transform: translateX(-80px) translateY(0) scaleX(1); }
  25% { transform: translateX(20%) translateY(-3px) scaleX(1); }
  45% { transform: translateX(calc(100% + 30px)) translateY(0) scaleX(1); }
  50% { transform: translateX(calc(100% + 30px)) translateY(0) scaleX(-1); }
  75% { transform: translateX(20%) translateY(3px) scaleX(-1); }
  95% { transform: translateX(-80px) translateY(0) scaleX(-1); }
}

/* ==============================================================================
   ベーシックプランユーザーからの紫色の魚
   ============================================================================== */
.cm-basic-fish-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cm-basic-fish {
  position: absolute;
  width: 20px;
  height: 14px;
  animation: cm-basic-fish-swim 6.5s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.cm-basic-fish svg {
  width: 100%;
  height: 100%;
  fill: #a855f7;
  filter: drop-shadow(0 0 3px rgba(168, 85, 247, 0.8)) drop-shadow(0 0 6px rgba(168, 85, 247, 0.5));
}

/* data-basic-fish-count に応じて紫色の魚を表示 */
.cuisine-detail-reaction[data-basic-fish-count="1"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="2"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="2"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="3"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="3"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="3"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="4"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="4"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="4"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="4"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="5"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="5"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="5"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="5"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="5"] .cm-basic-fish-5,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-5,
.cuisine-detail-reaction[data-basic-fish-count="6"] .cm-basic-fish-6,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-5,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-6,
.cuisine-detail-reaction[data-basic-fish-count="7"] .cm-basic-fish-7,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-5,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-6,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-7,
.cuisine-detail-reaction[data-basic-fish-count="8"] .cm-basic-fish-8,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-1,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-2,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-3,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-4,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-5,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-6,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-7,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-8,
.cuisine-detail-reaction[data-basic-fish-count="9"] .cm-basic-fish-9 {
  opacity: 1;
}

.cm-basic-fish-1 { top: 15%; animation-delay: -0.5s; animation-duration: 6.0s; }
.cm-basic-fish-2 { top: 45%; animation-delay: -3.5s; animation-duration: 7.0s; }
.cm-basic-fish-3 { top: 30%; animation-delay: -1.5s; animation-duration: 6.3s; }
.cm-basic-fish-4 { top: 60%; animation-delay: -4.5s; animation-duration: 6.7s; }
.cm-basic-fish-5 { top: 10%; animation-delay: -2.8s; animation-duration: 5.8s; }
.cm-basic-fish-6 { top: 50%; animation-delay: -5.5s; animation-duration: 7.3s; }
.cm-basic-fish-7 { top: 25%; animation-delay: -0.9s; animation-duration: 6.1s; }
.cm-basic-fish-8 { top: 70%; animation-delay: -3.2s; animation-duration: 6.5s; }
.cm-basic-fish-9 { top: 38%; animation-delay: -4.7s; animation-duration: 5.7s; }

@keyframes cm-basic-fish-swim {
  0% { left: -22px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 22px); transform: translateY(-5px) scaleX(1); }
  50% { left: calc(100% + 22px); transform: translateY(0) scaleX(-1); }
  98% { left: -22px; transform: translateY(5px) scaleX(-1); }
  100% { left: -22px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   プロプランユーザーからの金色の魚
   ============================================================================== */
.cm-pro-fish-group {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cm-pro-fish {
  position: absolute;
  width: 22px;
  height: 16px;
  animation: cm-pro-fish-swim 6s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.cm-pro-fish svg {
  width: 100%;
  height: 100%;
  fill: #fbbf24;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.8)) drop-shadow(0 0 6px rgba(251, 191, 36, 0.5));
}

/* data-pro-fish-count に応じて金色の魚を表示 */
.cuisine-detail-reaction[data-pro-fish-count="1"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="2"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="2"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="3"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="3"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="3"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="4"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="4"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="4"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="4"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="5"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="5"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="5"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="5"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="5"] .cm-pro-fish-5,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-5,
.cuisine-detail-reaction[data-pro-fish-count="6"] .cm-pro-fish-6,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-5,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-6,
.cuisine-detail-reaction[data-pro-fish-count="7"] .cm-pro-fish-7,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-5,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-6,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-7,
.cuisine-detail-reaction[data-pro-fish-count="8"] .cm-pro-fish-8,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-1,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-2,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-3,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-4,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-5,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-6,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-7,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-8,
.cuisine-detail-reaction[data-pro-fish-count="9"] .cm-pro-fish-9 {
  opacity: 1;
}

.cm-pro-fish-1 { top: 18%; animation-delay: -0.3s; animation-duration: 5.5s; }
.cm-pro-fish-2 { top: 48%; animation-delay: -3.2s; animation-duration: 6.5s; }
.cm-pro-fish-3 { top: 32%; animation-delay: -1.8s; animation-duration: 5.8s; }
.cm-pro-fish-4 { top: 62%; animation-delay: -4.1s; animation-duration: 6.2s; }
.cm-pro-fish-5 { top: 8%; animation-delay: -2.5s; animation-duration: 5.3s; }
.cm-pro-fish-6 { top: 52%; animation-delay: -5.2s; animation-duration: 6.8s; }
.cm-pro-fish-7 { top: 27%; animation-delay: -0.7s; animation-duration: 5.6s; }
.cm-pro-fish-8 { top: 72%; animation-delay: -3.0s; animation-duration: 6.0s; }
.cm-pro-fish-9 { top: 40%; animation-delay: -4.5s; animation-duration: 5.2s; }

@keyframes cm-pro-fish-swim {
  0% { left: -24px; transform: translateY(0) scaleX(1); }
  48% { left: calc(100% + 24px); transform: translateY(-6px) scaleX(1); }
  50% { left: calc(100% + 24px); transform: translateY(0) scaleX(-1); }
  98% { left: -24px; transform: translateY(6px) scaleX(-1); }
  100% { left: -24px; transform: translateY(0) scaleX(1); }
}

/* ==============================================================================
   魚ボタン
   ============================================================================== */
.cuisine-reaction-button {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.cuisine-reaction-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.cuisine-reaction-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cuisine-reaction-button.reacted {
  border-color: #f59e0b;
  background: rgba(255, 251, 235, 0.95);
}

/* ==============================================================================
   魚アイコン
   ============================================================================== */
.cuisine-reaction-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cuisine-reaction-icon-wrapper.reacted {
  color: #f59e0b;
}

.cuisine-reaction-icon-wrapper svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
}

/* クリーチャータイプに応じた泳ぎアニメーション */
.cuisine-detail-reaction[data-creature-type="none"] .cuisine-reaction-icon-wrapper { animation: cm-swim-idle 4s ease-in-out infinite; }
.cuisine-detail-reaction[data-creature-type="individual"] .cuisine-reaction-icon-wrapper { animation: cm-swim-gentle 3s ease-in-out infinite; }
.cuisine-detail-reaction[data-creature-type="school"] .cuisine-reaction-icon-wrapper { animation: cm-swim-normal 2.5s ease-in-out infinite; }
.cuisine-detail-reaction[data-creature-type="swarm"] .cuisine-reaction-icon-wrapper { animation: cm-swim-active 2s ease-in-out infinite; }
.cuisine-detail-reaction[data-creature-type="shark"] .cuisine-reaction-icon-wrapper { animation: cm-swim-excited 1.5s ease-in-out infinite; }
.cuisine-detail-reaction[data-creature-type="whale"] .cuisine-reaction-icon-wrapper { animation: cm-swim-legendary 1.2s ease-in-out infinite; }

/* クリック時のバウンス */
.cuisine-reaction-icon-wrapper.fish-bounce svg {
  animation: cm-fish-bounce 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cm-fish-bounce {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(96, 165, 250, 0));
  }
  20% {
    transform: scale(1.4) rotate(-10deg);
    filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.7));
  }
  40% {
    transform: scale(1.2) rotate(8deg);
    filter: drop-shadow(0 0 5px rgba(96, 165, 250, 0.5));
  }
  60% {
    transform: scale(1.3) rotate(-3deg);
    filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.6));
  }
  80% {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.3));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(96, 165, 250, 0));
  }
}

/* ==============================================================================
   クールダウン状態
   ============================================================================== */
.cuisine-reaction-button.cooldown {
  pointer-events: none;
  opacity: 0.6;
}

/* ==============================================================================
   BASICユーザー用バウンスアニメーション（紫色）
   ============================================================================== */
.cuisine-reaction-icon-wrapper.fish-bounce-basic svg {
  animation: cm-fish-bounce-basic 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cm-fish-bounce-basic {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  }
  20% {
    transform: scale(1.5) rotate(-15deg);
    filter: drop-shadow(0 0 12px rgba(168, 85, 247, 0.9));
  }
  40% {
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.7));
  }
  60% {
    transform: scale(1.4) rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.8));
  }
  80% {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 4px rgba(168, 85, 247, 0.4));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(168, 85, 247, 0));
  }
}

/* ==============================================================================
   PROユーザー用バウンスアニメーション（金色）
   ============================================================================== */
.cuisine-reaction-icon-wrapper.fish-bounce-premium svg {
  animation: cm-fish-bounce-premium 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cm-fish-bounce-premium {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
  }
  20% {
    transform: scale(1.5) rotate(-15deg);
    filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.9));
  }
  40% {
    transform: scale(1.3) rotate(10deg);
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7));
  }
  60% {
    transform: scale(1.4) rotate(-5deg);
    filter: drop-shadow(0 0 10px rgba(251, 191, 36, 0.8));
  }
  80% {
    transform: scale(1.1) rotate(3deg);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.4));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0));
  }
}

/* ==============================================================================
   カウント表示
   ============================================================================== */
.cuisine-reaction-count-display {
  display: flex;
  align-items: baseline;
}

@keyframes cm-swim-idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes cm-swim-gentle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(2px) rotate(2deg); }
  75% { transform: translateX(-2px) rotate(-2deg); }
}

@keyframes cm-swim-normal {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  25% { transform: translateX(3px) translateY(-1px) rotate(3deg); }
  75% { transform: translateX(-3px) translateY(1px) rotate(-3deg); }
}

@keyframes cm-swim-active {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  20% { transform: translateX(4px) translateY(-2px) rotate(4deg); }
  40% { transform: translateX(2px) translateY(-4px) rotate(2deg); }
  60% { transform: translateX(-2px) translateY(-2px) rotate(-2deg); }
  80% { transform: translateX(-4px) translateY(-1px) rotate(-4deg); }
}

@keyframes cm-swim-excited {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
  15% { transform: translateX(5px) translateY(-4px) rotate(6deg); }
  30% { transform: translateX(3px) translateY(-6px) rotate(3deg); }
  50% { transform: translateX(-1px) translateY(-4px) rotate(-2deg); }
  70% { transform: translateX(-5px) translateY(-6px) rotate(-6deg); }
  85% { transform: translateX(-3px) translateY(-2px) rotate(-3deg); }
}

@keyframes cm-swim-legendary {
  0%, 100% { transform: translateX(0) translateY(0) rotate(0deg) scale(1); }
  10% { transform: translateX(4px) translateY(-5px) rotate(8deg) scale(1.03); }
  25% { transform: translateX(6px) translateY(-8px) rotate(4deg) scale(1.05); }
  40% { transform: translateX(2px) translateY(-10px) rotate(-2deg) scale(1.03); }
  55% { transform: translateX(-4px) translateY(-8px) rotate(-6deg) scale(1.05); }
  70% { transform: translateX(-6px) translateY(-5px) rotate(-8deg) scale(1.03); }
  85% { transform: translateX(-3px) translateY(-2px) rotate(-4deg) scale(1.01); }
}

.cuisine-reaction-count {
  font-size: 1.1em;
  font-weight: 700;
  color: #1e293b;
}

/* パーティクルエフェクト */
.cuisine-reaction-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  z-index: 20;
  pointer-events: none;
}

.cuisine-reaction-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--particle-color, #fbbf24);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--particle-color, #fbbf24);
  animation: cuisineParticleBurst 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--particle-delay, 0s);
}

@keyframes cuisineParticleBurst {
  0% {
    opacity: 1;
    transform: rotate(var(--particle-angle)) translateX(0) scale(1);
  }
  60% {
    opacity: 1;
    transform: rotate(var(--particle-angle)) translateX(var(--particle-distance)) scale(1.2);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--particle-angle)) translateX(calc(var(--particle-distance) * 1.3)) scale(0);
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .cuisine-detail-reaction {
    padding: 8px;
    gap: 4px;
    border-radius: 8px;
  }

  .cuisine-reaction-button {
    padding: 6px 12px;
    gap: 6px;
    border-radius: 10px;
  }

  .cuisine-reaction-icon-wrapper svg {
    width: 24px;
    height: 24px;
  }

  .cuisine-reaction-count {
    font-size: 0.95em;
  }

  .cm-seaweed-blade {
    width: 4px;
  }

  .cuisine-reaction-particle {
    width: 5px;
    height: 5px;
  }
}

@media (max-width: 480px) {
  .cuisine-detail-reaction {
    min-height: 60px;
    padding: 6px;
  }

  .cuisine-reaction-button {
    padding: 5px 10px;
    gap: 5px;
  }

  .cuisine-reaction-icon-wrapper svg {
    width: 20px;
    height: 20px;
  }

  .cuisine-reaction-count {
    font-size: 0.9em;
  }

  .cuisine-reaction-particle {
    width: 4px;
    height: 4px;
  }

  .cm-swimming-fish {
    width: 14px;
    height: 10px;
  }

  .cm-basic-fish {
    width: 16px;
    height: 11px;
  }

  .cm-pro-fish {
    width: 17px;
    height: 12px;
  }

  .cm-school-fish {
    width: 10px;
    height: 7px;
  }

  .cm-swarm-fish {
    width: 8px;
    height: 5px;
  }

  .cm-shark-svg {
    width: 40px;
    height: 24px;
  }

  .cm-whale-svg {
    width: 55px;
    height: 32px;
  }

  .cm-seaweed-left .cm-blade-1 { height: 14px; }
  .cm-seaweed-left .cm-blade-2 { height: 20px; }
  .cm-seaweed-left .cm-blade-3 { height: 10px; }
  .cm-seaweed-right .cm-blade-1 { height: 12px; }
  .cm-seaweed-right .cm-blade-2 { height: 18px; }
  .cm-seaweed-right .cm-blade-3 { height: 9px; }
}