.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}
.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}
.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%, var(--color-warning) 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--development {background: linear-gradient(135deg, #0f766e 0%, #0e7490 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: var(--color-bg-muted);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}
.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-panel-coming-soon--development i {color: #0f766e}
.carousel3d-panel-coming-soon--development p {color: #0f172a}
.carousel3d-panel-coming-soon--development span {color: #0f766e;font-weight: 600}
.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}}
@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}}
.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}
.carousel3d-modal .carousel3d-container {height: 500px;perspective: 1200px;width: 100%;max-width: 1200px}
.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}
.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}
.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}}
@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%, var(--color-warning) 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: var(--color-bg-muted);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}
.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}
.carousel3d-panel-more-link {display: flex;align-items: center;justify-content: center;gap: 6px;padding: 10px 16px;margin-top: 8px;background: linear-gradient(135deg, #f0f2f5 0%, #e4e6eb 100%);border-radius: 8px;color: #1877f2;font-size: 0.85rem;font-weight: 600;text-decoration: none;transition: all 0.2s ease}
.carousel3d-panel-more-link:hover {background: linear-gradient(135deg, #e4e6eb 0%, #d8dadf 100%);color: #1558b0;transform: translateY(-1px)}
.carousel3d-panel-more-link:active {transform: translateY(0)}
.carousel3d-panel-more-link i {font-size: 0.75rem;transition: transform 0.2s ease}
.carousel3d-panel-more-link:hover i {transform: translateX(3px)}
.carousel3d-panel-tap-hint {display: flex;align-items: center;justify-content: center;gap: 6px;padding: 8px 0;margin-top: auto;font-size: 0.75rem;color: #65676b}
.carousel3d-panel-tap-hint i {font-size: 0.85rem;color: #1877f2;animation: tap-hint-pulse 2s ease-in-out infinite}
@keyframes tap-hint-pulse {0%, 100% {opacity: 0.6;transform: scale(1)}
50% {opacity: 1;transform: scale(1.1)}}
.carousel3d-panel--clickable {cursor: pointer}
.carousel3d-panel--clickable:hover .carousel3d-panel-inner {box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15)}
.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 > .cuisine-gallery-image-wrapper 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}
.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 .cuisine-gallery-image-wrapper img,
.cuisine-gallery-grid[data-style="default"] .cuisine-gallery-item:hover .cuisine-gallery-image-wrapper 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}
.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, var(--color-success));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); }}
.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))}
.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); }}
.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); }}
.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; }}
.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: var(--color-text-muted);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); }}
.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))}
.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))}
.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: var(--color-warning);background: rgba(255, 251, 235, 0.95)}
.cuisine-reaction-icon-wrapper {display: flex;align-items: center;justify-content: center;color: var(--color-text-light);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)}
.cuisine-reaction-icon-wrapper.reacted {color: var(--color-warning)}
.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}
.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))}}
.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: var(--color-text-primary)}
.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; }}
.carousel3d-panel-header--ship {background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%)}
.carousel3d-panel-header--prefecture {background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)}
.carousel3d-panel-header--target-fish {background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%)}
.carousel3d-panel-header--target-fish svg {width: 18px;height: 18px}
.carousel3d-panel-header--beginner {background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%)}
.carousel3d-panel-header--affordable {background: linear-gradient(135deg, var(--color-warning) 0%, #d97706 100%)}
.carousel3d-panel-header--rental {background: linear-gradient(135deg, #ec4899 0%, #db2777 100%)}
.carousel3d-panel-header--registered {background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%)}
.carousel3d-panel-header--reservation {background: linear-gradient(135deg, #f97316 0%, #ea580c 100%)}
.carousel3d-panel-header--register {background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%)}
.carousel3d-list-item--ship {gap: 8px}
.carousel3d-list-item--ship .carousel3d-list-image {width: 50px;height: 35px;border-radius: 6px}
.carousel3d-list-item--ship .carousel3d-list-image img {object-fit: cover}
.carousel3d-list-placeholder--ship {background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);color: #0284c7}
.carousel3d-ship-fish {display: inline-block;background: rgba(14, 165, 233, 0.15);color: #0369a1;padding: 1px 6px;border-radius: 10px;font-size: 10px;margin-left: 4px}
.carousel3d-list-meta--price {color: #d97706;font-weight: 600}
.carousel3d-list-meta--price i {font-size: 10px}
.carousel3d-prefecture-list {display: flex;flex-direction: column;gap: 6px}
.carousel3d-prefecture-item {display: flex;justify-content: space-between;align-items: center;padding: 8px 12px;background: var(--color-bg-muted);border-radius: 8px;transition: background 0.2s}
.carousel3d-prefecture-item:hover {background: var(--color-bg-secondary)}
.carousel3d-prefecture-name {font-size: 13px;font-weight: 500;color: var(--color-text-primary)}
.carousel3d-prefecture-count {font-size: 12px;color: var(--color-text-muted);font-weight: 600}
.carousel3d-fish-list {display: flex;flex-direction: column;gap: 6px}
.carousel3d-fish-item {display: flex;align-items: center;gap: 10px;padding: 8px 12px;background: var(--color-bg-muted);border-radius: 8px;transition: background 0.2s}
.carousel3d-fish-item:hover {background: var(--color-bg-secondary)}
.carousel3d-fish-rank {width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);color: white;font-size: 11px;font-weight: 700;border-radius: 50%}
.carousel3d-fish-name {flex: 1;font-size: 13px;font-weight: 500;color: var(--color-text-primary)}
.carousel3d-fish-count {font-size: 12px;color: var(--color-text-muted);font-weight: 600}