.area-catches-carousel {position: absolute;bottom: 16px;left: 0;right: 0;z-index: 10;pointer-events: none;transform: translateY(30px);opacity: 0;transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.35s ease;visibility: hidden}
.area-catches-carousel.is-visible {transform: translateY(0);opacity: 1;visibility: visible}
.area-catches-carousel.is-hiding {transform: translateY(20px);opacity: 0;visibility: visible;transition: transform 0.3s cubic-bezier(0.4, 0, 1, 1),
opacity 0.25s ease}
.area-catches-carousel-header {display: flex;align-items: center;gap: 8px;padding: 0 16px 8px;pointer-events: auto}
.area-catches-carousel-title {display: inline-flex;align-items: center;gap: 5px;font-size: 13px;font-weight: 700;color: #fff;background: rgba(0, 0, 0, 0.6);padding: 5px 12px;border-radius: 16px;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px)}
.area-catches-carousel-count {font-weight: 400;opacity: 0.8;margin-left: 2px}
.area-catches-carousel-notice {display: inline-flex;align-items: center;gap: 4px;font-size: 10px;color: rgba(255, 255, 255, 0.8);background: rgba(0, 0, 0, 0.4);padding: 4px 10px;border-radius: 12px;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px)}
.area-catches-carousel-scroll {display: flex;gap: 10px;overflow-x: auto;padding: 0 0 8px;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;scrollbar-width: none;pointer-events: auto}
.area-catches-carousel-scroll .area-catch-card:first-child {margin-left: 16px}
.area-catches-carousel-scroll .area-catch-card:last-child {margin-right: 16px}
.area-catches-carousel-scroll::-webkit-scrollbar {display: none}
.area-catches-nav {display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 36px;height: 36px;border: none;border-radius: 50%;background: rgba(0, 0, 0, 0.55);color: #fff;cursor: pointer;pointer-events: auto;z-index: 12;align-items: center;justify-content: center;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);transition: background 0.2s ease}
.area-catches-nav:hover {background: rgba(0, 0, 0, 0.75)}
.area-catches-nav.is-hidden {display: none !important}
.area-catches-prev {left: 4px}
.area-catches-next {right: 4px}
@media (min-width: 769px) {.area-catches-nav {display: flex}}
.area-catch-card {flex-shrink: 0;width: 240px;border-radius: 16px;overflow: hidden;background: #fff;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);scroll-snap-align: start;color: #333;display: block;transition: transform 0.2s ease, box-shadow 0.2s ease}
.area-catch-card:hover {transform: translateY(-3px);box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.12)}
.area-catch-card:active {transform: scale(0.97)}
.area-catch-card--mine,
.area-catch-card--guild,
.area-catch-card--following {position: relative}
.area-catch-card--mine::after,
.area-catch-card--guild::after,
.area-catch-card--following::after {content: "";position: absolute;inset: 0;border-radius: inherit;pointer-events: none;z-index: 2}
.area-catch-card--mine {box-shadow: 0 0 12px rgba(59, 130, 246, 0.25), 0 8px 32px rgba(0, 0, 0, 0.18)}
.area-catch-card--mine::after {box-shadow: inset 0 0 0 3px rgba(59, 130, 246, 0.7)}
.area-catch-card--mine:hover {box-shadow: 0 0 16px rgba(59, 130, 246, 0.3), 0 12px 40px rgba(0, 0, 0, 0.22)}
.area-catch-card--mine:hover::after {box-shadow: inset 0 0 0 3px rgba(59, 130, 246, 0.8)}
.area-catch-card--guild {box-shadow: 0 0 12px rgba(34, 197, 94, 0.25), 0 8px 32px rgba(0, 0, 0, 0.18)}
.area-catch-card--guild::after {box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.7)}
.area-catch-card--guild:hover {box-shadow: 0 0 16px rgba(34, 197, 94, 0.3), 0 12px 40px rgba(0, 0, 0, 0.22)}
.area-catch-card--guild:hover::after {box-shadow: inset 0 0 0 3px rgba(34, 197, 94, 0.8)}
.area-catch-card--following {box-shadow: 0 0 12px rgba(251, 146, 60, 0.25), 0 8px 32px rgba(0, 0, 0, 0.18)}
.area-catch-card--following::after {box-shadow: inset 0 0 0 3px rgba(251, 146, 60, 0.7)}
.area-catch-card--following:hover {box-shadow: 0 0 16px rgba(251, 146, 60, 0.3), 0 12px 40px rgba(0, 0, 0, 0.22)}
.area-catch-card--following:hover::after {box-shadow: inset 0 0 0 3px rgba(251, 146, 60, 0.8)}
.area-catch-card-image {width: 100%;height: 150px;position: relative;overflow: hidden;background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)}
.area-catch-card-image img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease}
.area-catch-card:hover .area-catch-card-image img {transform: scale(1.05)}
.area-catch-card-image-placeholder {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%)}
.area-catch-card-image-placeholder svg {width: 48px;height: 48px;fill: none;stroke: #0ea5e9;stroke-width: 1.5;stroke-linecap: round;stroke-linejoin: round;opacity: 0.6}
.area-catch-card-fish-badge {position: absolute;bottom: 10px;left: 10px;right: 10px}
.area-catch-card-fish {display: inline-block;background: linear-gradient(135deg, rgba(59, 130, 246, 0.95) 0%, rgba(37, 99, 235, 0.95) 100%);backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);color: #fff;padding: 6px 12px;border-radius: 20px;font-size: 13px;font-weight: 700;letter-spacing: 0.3px;box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);max-width: calc(100% - 8px);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-decoration: none;cursor: pointer}
.area-catch-card-image > a {display: block;width: 100%;height: 100%}
.area-catch-card-body {padding: 12px}
.area-catch-card-stats {display: grid;grid-template-columns: 1fr 1fr;gap: 6px;margin-bottom: 8px}
.area-catch-card-stat {background: var(--color-bg-muted, #f8fafc);border-radius: 8px;padding: 6px 8px;text-align: center;border: 1px solid var(--color-border, #e2e8f0)}
.area-catch-card-stat-label {font-size: 9px;color: var(--color-text-light, #94a3b8);text-transform: uppercase;letter-spacing: 0.4px}
.area-catch-card-stat-value {font-size: 14px;font-weight: 700;color: var(--color-text-primary, #1e293b)}
.area-catch-card-stat-value.has-value {color: #0284c7}
.area-catch-card-footer {display: flex;justify-content: space-between;align-items: center;padding-top: 8px;border-top: 1px solid var(--color-border-light, #f1f5f9)}
.area-catch-card-user {display: flex;align-items: center;gap: 6px;min-width: 0;flex: 1}
.area-catch-card-avatar {width: 22px;height: 22px;border-radius: 50%;overflow: hidden;flex-shrink: 0;background: #fff;border: 1.5px solid var(--color-border, #e2e8f0);box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08)}
.area-catch-card-avatar img,
.area-catch-card-avatar svg {width: 100%;height: 100%;object-fit: cover}
.area-catch-card-username {font-size: 12px;font-weight: 600;color: var(--color-text-primary, #1e293b);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-decoration: none;cursor: pointer}
.area-catch-card-time {font-size: 11px;color: var(--color-text-light, #94a3b8);flex-shrink: 0}
.area-catches-empty {padding: 12px 16px;font-size: 13px;color: rgba(255, 255, 255, 0.8);background: rgba(0, 0, 0, 0.5);border-radius: 12px;margin: 0 16px;text-align: center;backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);pointer-events: auto}