.fish-modal-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.6);backdrop-filter: blur(4px);display: flex;justify-content: center;align-items: center;z-index: var(--z-index-modal);padding: 20px}
.fish-modal-overlay.hidden {display: none}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0}
.fish-encyclopedia {background: #ffffff;border-radius: 16px;max-width: 420px;width: 100%;max-height: 95vh;overflow: hidden;box-shadow:
0 20px 60px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.05);position: relative}
.fish-encyclopedia-header {background: linear-gradient(135deg, #1877f2 0%, #166fe5 100%);padding: 16px 20px;border-radius: 16px 16px 0 0;display: flex;justify-content: space-between;align-items: flex-end;position: relative;overflow: hidden;min-height: 60px}
.fish-encyclopedia-header.has-illustration {min-height: 160px;padding: 16px 20px 14px}
.fish-encyclopedia-header.has-illustration::after {content: "";position: absolute;inset: 0;background: linear-gradient(
0deg,
rgba(10, 60, 150, 0.85) 0%,
rgba(10, 60, 150, 0.45) 40%,
rgba(10, 60, 150, 0.15) 70%,
rgba(10, 60, 150, 0.05) 100%
);pointer-events: none}
.fish-header-illustration {position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;opacity: 0.9;pointer-events: none}
.fish-encyclopedia-title-area {flex: 1;position: relative;z-index: 1}
.new-species-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;z-index: 10;animation: new-species-appear 0.5s ease-out}
.new-species-content {background: linear-gradient(135deg, rgba(24, 119, 242, 0.97) 0%, rgba(22, 111, 229, 0.97) 100%);border-radius: 20px;padding: 40px 50px;text-align: center;box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 0 4px rgba(255, 255, 255, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2);animation: new-species-pulse 2s ease-in-out infinite}
.new-species-icon {color: #fbbf24;margin-bottom: 16px;animation: star-spin 1s ease-out;filter: drop-shadow(0 4px 8px rgba(251, 191, 36, 0.5))}
.new-species-icon svg {width: 64px;height: 64px}
.new-species-text {display: flex;flex-direction: column;gap: 8px;margin-bottom: 20px}
.new-species-label {display: inline-block;background: linear-gradient(135deg, #fbbf24 0%, var(--color-warning) 100%);color: #1c1e21;font-size: 0.9em;font-weight: 800;padding: 6px 20px;border-radius: 20px;letter-spacing: 3px;text-transform: uppercase;margin: 0 auto;box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4)}
.new-species-title {color: #fff;font-size: 1.3em;font-weight: 700;line-height: 1.4;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2)}
.new-species-fish-name {color: #fff;font-size: 2em;font-weight: 800;letter-spacing: 2px;text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);padding-top: 16px;border-top: 2px solid rgba(255, 255, 255, 0.2)}
@keyframes new-species-appear {0% {opacity: 0;transform: scale(0.8)}
50% {transform: scale(1.05)}
100% {opacity: 1;transform: scale(1)}}
@keyframes new-species-pulse {0%, 100% {box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 0 0 4px rgba(255, 255, 255, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2)}
50% {box-shadow:
0 25px 70px rgba(0, 0, 0, 0.5),
0 0 0 6px rgba(255, 255, 255, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3)}}
@keyframes star-spin {0% {transform: rotate(-20deg) scale(0);opacity: 0}
50% {transform: rotate(10deg) scale(1.2)}
100% {transform: rotate(0deg) scale(1);opacity: 1}}
.fish-encyclopedia-name {color: #fff;font-size: 1.6em;font-weight: 700;margin: 0;letter-spacing: 1px;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3)}
.fish-encyclopedia-name-link {color: inherit;text-decoration: none}
.fish-encyclopedia-name-link:hover {filter: brightness(1.1);text-decoration: underline;text-underline-offset: 3px}
.fish-encyclopedia-close {background: rgba(255, 255, 255, 0.15);border: none;border-radius: 50%;width: 36px;height: 36px;display: flex;align-items: center;justify-content: center;cursor: pointer;color: #fff;transition: all 0.2s ease;flex-shrink: 0;position: relative;z-index: 1;align-self: flex-start}
.fish-encyclopedia-close:hover {background: rgba(255, 255, 255, 0.25)}
.fish-comparison-container {display: flex;flex-direction: column;gap: 10px;margin-bottom: 10px}
.fish-comparison-card,
.fish-comparison-card--simple {background: #f8fbff;border: 1px solid #dce8f5;border-radius: 14px;padding: 16px}
.fish-comparison-header {display: flex;align-items: center;gap: 8px;margin-bottom: 10px}
.fish-comparison-icon {width: 28px;height: 28px;background: #e8f1fb;color: #4a8eca;border-radius: 8px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;font-size: 0.85em}
.fish-comparison-icon svg {width: 16px;height: 16px}
.fish-comparison-title {font-size: 0.8em;font-weight: 600;color: #4a7ba5}
.fish-comparison-simple-value {font-size: 1.05em;font-weight: 700;color: #2c3e50;padding-left: 36px}
.fish-comparison-values {display: grid;grid-template-columns: 1fr auto 1fr;align-items: center;margin-top: 2px}
.fish-comparison-value-box {text-align: center;padding: 4px}
.fish-comparison-value-label {display: block;font-size: 0.65em;font-weight: 500;color: #8dafc8;margin-bottom: 2px}
.fish-comparison-value-number {font-size: 1.05em;font-weight: 700;color: #2c3e50}
.fish-comparison-value-number.yours {color: #2d7cb5}
.fish-comparison-vs {font-size: 0.65em;font-weight: 600;color: #b8d4ec;padding: 0 6px}
.fish-comparison-bar-area {padding: 6px 0}
.fish-comparison-bar-track {width: 100%;height: 7px;background: #e0eaf4;border-radius: 4px;position: relative;overflow: visible}
.fish-comparison-bar-range {position: absolute;top: 0;height: 100%;background: linear-gradient(90deg, #b8d4ec, #7ab3d8);border-radius: 4px}
.fish-comparison-bar-marker {position: absolute;top: 50%;transform: translate(-50%, -50%);width: 15px;height: 15px;background: #2d7cb5;border: 2.5px solid #f8fbff;border-radius: 50%;box-shadow: 0 1px 4px rgba(45, 124, 181, 0.25);z-index: 2}
.fish-enc-page-dots {display: flex;justify-content: center;gap: 16px;padding: 10px 16px 6px;border-bottom: 1px solid #e4e6e9;background: #fff}
.fish-enc-dot {display: flex;flex-direction: column;align-items: center;gap: 4px;background: none;border: none;padding: 2px 4px;cursor: pointer}
.fish-enc-dot-indicator {width: 8px;height: 8px;border-radius: 50%;background: #dddfe2;transition: all 0.2s ease}
.fish-enc-dot.active .fish-enc-dot-indicator {background: #1877f2;width: 20px;border-radius: 4px}
.fish-enc-dot-label {font-size: 0.6em;color: #8b949e;white-space: nowrap;transition: color 0.2s ease}
.fish-enc-dot.active .fish-enc-dot-label {color: #1877f2;font-weight: 600}
.fish-enc-page {display: none}
.fish-enc-page.active {display: block;animation: fish-enc-page-fade 0.25s ease}
@keyframes fish-enc-page-fade {from { opacity: 0; transform: translateX(12px); }
to { opacity: 1; transform: translateX(0); }}
.fish-encyclopedia-body {padding: 14px 16px;overflow-y: auto;overscroll-behavior: contain;max-height: calc(95vh - 80px - 50px - 40px)}
.fish-encyclopedia-description {color: #606770;font-size: 0.9em;line-height: 1.5;margin: 0 0 12px 0;padding: 10px 12px;background: #f0f2f5;border-radius: 8px;border-left: 3px solid #1877f2}
.fish-stats-container {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;margin-bottom: 10px}
.fish-stat-card {background: #f7f8fa;border: 1px solid #e4e6e9;border-radius: 10px;padding: 10px;display: flex;flex-direction: column;align-items: center;text-align: center;transition: all 0.2s ease}
.fish-stat-card:hover {border-color: #1877f2;box-shadow: 0 2px 8px rgba(24, 119, 242, 0.1)}
.fish-stat-icon {width: 36px;height: 36px;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 6px}
.fish-stat-icon.rarity-icon {background: linear-gradient(135deg, #fbbf24, var(--color-warning));color: #fff}
.fish-stat-icon.taste-icon {background: linear-gradient(135deg, #f472b6, #ec4899);color: #fff}
.fish-stat-content {display: flex;flex-direction: column;align-items: center}
.fish-stat-label {color: #606770;font-size: 0.7em;font-weight: 600;text-transform: uppercase;letter-spacing: 0.5px;margin-bottom: 4px}
.fish-stat-stars {display: flex;gap: 1px;margin-bottom: 4px}
.fish-stat-stars .star {font-size: 1em;color: #dddfe2;transition: all 0.2s ease}
.fish-stat-stars .star.filled {color: #fbbf24}
.fish-stat-text {color: #1c1e21;font-size: 0.8em;font-weight: 600}
.fish-size-container {display: grid;grid-template-columns: 1fr 1fr;gap: 8px;margin-bottom: 10px}
.fish-warning {background: #fef3c7;border: 1px solid #fbbf24;border-radius: 8px;padding: 10px 12px;display: flex;align-items: center;gap: 10px}
.fish-warning-icon {width: 36px;height: 36px;background: var(--color-warning);border-radius: 50%;display: flex;align-items: center;justify-content: center;color: #fff;flex-shrink: 0}
.fish-warning-content {display: flex;flex-direction: column}
.fish-warning-title {color: #92400e;font-size: 0.75em;font-weight: 700;text-transform: uppercase;letter-spacing: 0.5px}
.fish-warning-text {color: #78350f;font-size: 0.8em;line-height: 1.3}
.fish-encyclopedia-footer {padding: 10px 16px 12px;display: flex;justify-content: center;border-top: 1px solid #e4e6e9;margin-top: 4px}
.fish-encyclopedia-decoration {display: flex;gap: 8px}
.decoration-dot {width: 8px;height: 8px;border-radius: 50%;background: #dddfe2}
.decoration-dot:nth-child(1) {background: #1877f2}
.decoration-dot:nth-child(2) {background: #606770}
.decoration-dot:nth-child(3) {background: #dddfe2}
.ai-fish-name-link {color: #1877f2;font-weight: 500;cursor: pointer;display: inline-flex;align-items: center;gap: 4px;padding: 2px 8px;margin: -2px -8px;border-radius: 6px;transition: all 0.2s ease}
.ai-fish-name-link:hover {background: #e7f3ff;text-decoration: none}
.ai-fish-name-link::after {content: '';display: inline-block;width: 14px;height: 14px;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231877f2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");background-size: contain;opacity: 0.8}
.ai-fish-name-pending {color: #6b7280;font-size: 0.9rem;display: inline-flex;align-items: center;gap: 6px;cursor: pointer}
.ai-fish-name-pending i {color: var(--color-primary);font-size: 0.85rem}
.ai-fish-name-pending svg {width: 14px;height: 14px;flex-shrink: 0;color: var(--color-primary)}
.ai-fish-name-unknown {color: #9ca3af;font-size: 0.9rem;cursor: pointer}
.fish-modal-opening .fish-encyclopedia {animation: modal-open 0.25s ease-out}
.fish-modal-closing .fish-encyclopedia {animation: modal-close 0.2s ease-in}
@keyframes modal-open {0% {opacity: 0;transform: scale(0.95) translateY(10px)}
100% {opacity: 1;transform: scale(1) translateY(0)}}
@keyframes modal-close {0% {opacity: 1;transform: scale(1) translateY(0)}
100% {opacity: 0;transform: scale(0.95) translateY(10px)}}
@media (max-width: 480px) {.fish-modal-overlay {padding: 8px}
.fish-encyclopedia {max-height: 98vh}
.fish-encyclopedia-header {padding: 12px 14px}
.fish-encyclopedia-name {font-size: 1.3em}
.fish-encyclopedia-body {padding: 10px 12px}
.fish-encyclopedia-header.has-illustration {min-height: 130px}
.fish-encyclopedia-description {font-size: 0.85em;padding: 8px 10px;margin-bottom: 8px}
.fish-stats-container {gap: 6px;margin-bottom: 8px}
.fish-stat-card {padding: 8px}
.fish-stat-icon {width: 30px;height: 30px;margin-bottom: 4px}
.fish-size-container {gap: 6px;margin-bottom: 8px}
.fish-comparison-container {gap: 8px;margin-bottom: 8px}
.fish-comparison-card,
.fish-comparison-card--simple {padding: 12px;border-radius: 12px}
.fish-comparison-icon {width: 24px;height: 24px}
.fish-warning {padding: 8px 10px}
.fish-warning-icon {width: 30px;height: 30px}
.fish-encyclopedia-footer {padding: 8px 12px 10px}
.fish-enc-page-dots {gap: 12px;padding: 8px 12px 4px}}
.fish-enc-section {margin-bottom: 14px}
.fish-enc-section-title {font-size: 0.75em;font-weight: 700;color: #1877f2;margin-bottom: 8px;display: flex;align-items: center;gap: 6px;padding-bottom: 4px;border-bottom: 2px solid #e4e6e9}
.fish-enc-section-bar {width: 3px;height: 14px;background: #1877f2;border-radius: 2px;flex-shrink: 0}
.fish-enc-hero {background: linear-gradient(140deg, #123a77 0%, #1877f2 100%);border-radius: 16px;padding: 14px 16px 12px;color: #fff;display: flex;align-items: flex-end;justify-content: space-between;gap: 12px;margin-bottom: 14px;position: relative;overflow: hidden}
.fish-enc-hero::after {content: "";position: absolute;right: -30px;top: -40px;width: 130px;height: 130px;border-radius: 50%;background: rgba(255, 255, 255, 0.09)}
.fish-enc-hero-main {position: relative;z-index: 1;min-width: 0}
.fish-enc-hero-num {display: flex;align-items: baseline;gap: 5px}
.fish-enc-hero-num b {font-size: 34px;font-weight: 800;line-height: 1;letter-spacing: -0.02em}
.fish-enc-hero-num i {font-style: normal;font-size: 13px;opacity: 0.9}
.fish-enc-hero-cap {font-size: 11px;opacity: 0.82;margin-top: 4px}
.fish-enc-hero-spark {display: flex;align-items: flex-end;gap: 2.5px;height: 40px;position: relative;z-index: 1;flex-shrink: 0}
.fish-enc-hero-spark i {display: block;width: 6px;border-radius: 2px 2px 0 0;background: rgba(255, 255, 255, 0.42)}
.fish-enc-hero-spark i.fish-enc-hero-spark--peak {background: #fff}
.fish-enc-metrics {border: 1px solid #e4e6e9;border-radius: 14px;padding: 12px 13px 13px;margin-bottom: 16px}
.fish-enc-metric + .fish-enc-metric {margin-top: 12px;padding-top: 12px;border-top: 1px solid #f0f2f5}
.fish-enc-metric-name {display: flex;align-items: center;gap: 4px;font-size: 13px;font-weight: 700;letter-spacing: 0.02em;color: #1c1e21;margin-bottom: 9px}
.fish-enc-metric-name svg {width: 12px;height: 12px;color: #1877f2;flex-shrink: 0}
.fish-enc-metric-name i {font-style: normal;font-weight: 400;font-size: 10px;color: #90949c}
.fish-enc-metric-name i::before {content: "・"}
.fish-enc-metric-top {display: flex;flex-direction: column;gap: 4px}
.fish-enc-tp {display: flex;align-items: center;justify-content: flex-start;gap: 6px;padding: 5px 9px;border: 1px solid;border-radius: 9px;text-decoration: none;line-height: 1.25}
.fish-enc-tp-no {width: 14px;height: 14px;border-radius: 50%;flex-shrink: 0;display: flex;align-items: center;justify-content: center;font-size: 9px;font-weight: 700;color: #fff}
.fish-enc-tp--gold {background: linear-gradient(150deg, #fffbeb, #fef3c7);border-color: #fcd9a0;color: #b45309}
.fish-enc-tp--gold .fish-enc-tp-no {background: #b45309}
.fish-enc-tp--silver {background: #f7f9fc;border-color: #dfe4ec;color: #64748b}
.fish-enc-tp--silver .fish-enc-tp-no {background: #94a3b8}
.fish-enc-tp--bronze {background: #fdf7f1;border-color: #ecd9c6;color: #9a6b43}
.fish-enc-tp--bronze .fish-enc-tp-no {background: #b98a5a}
.fish-enc-tp.is-mine {box-shadow: 0 0 0 2px #1877f2}
.fish-enc-tp-mine {display: inline-flex;align-items: center;flex-shrink: 0;background: #1877f2;color: #fff;font-size: 9px;font-weight: 700;letter-spacing: 0.02em;padding: 2px 6px;border-radius: 999px}
.fish-enc-tp.is-mine .fish-enc-tp-name {color: #1c1e21;font-weight: 700}
.fish-enc-tp-user {display: flex;align-items: center;gap: 5px;flex: 1;min-width: 0}
.fish-enc-tp-name {font-size: 11px;font-weight: 600;color: #606770;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fish-enc-tp-val {display: flex;align-items: baseline;gap: 1px;min-width: 62px;justify-content: flex-end;flex-shrink: 0}
.fish-enc-tp-val b {font-size: 13.5px;font-weight: 700}
.fish-enc-tp-val u {text-decoration: none;font-size: 10px;font-weight: 600}
.fish-enc-tp-go {display: flex;opacity: 0.55;flex-shrink: 0}
.fish-enc-tp-go svg {width: 11px;height: 11px}
.fish-enc-metric-self {display: flex;align-items: baseline;justify-content: space-between;gap: 6px;margin-top: 6px;padding: 5px 9px;border-radius: 9px;background: #f2f7ff;border: 1px solid #dde9fb}
.fish-enc-metric-self::after {content: "";width: 11px;flex-shrink: 0}
.fish-enc-metric-self-label {font-size: 11.5px;font-weight: 700;color: #1c1e21}
.fish-enc-metric-self-rank {display: flex;align-items: baseline;gap: 1px}
.fish-enc-metric-self-rank b {font-size: 16px;font-weight: 700;color: #0b4da2;line-height: 1.15}
.fish-enc-metric-self-rank u {text-decoration: none;font-size: 11px;font-weight: 600;color: #0b4da2}
.fish-enc-metric-self-sub {margin-left: 4px;font-size: 9.5px;color: #90949c}
.fish-enc-metric-self-val {margin-left: auto;color: #0b4da2}
.fish-enc-block {margin-bottom: 16px}
.fish-enc-sec-label {display: flex;align-items: center;justify-content: space-between;gap: 8px;margin: 0 0 10px}
.fish-enc-sec-label h5 {margin: 0;font-size: 13px;font-weight: 700;letter-spacing: 0.02em;color: #1c1e21;display: flex;align-items: center;gap: 7px}
.fish-enc-sec-label h5 svg {width: 15px;height: 15px;color: #1877f2;flex-shrink: 0}
.fish-enc-sec-label small {font-size: 11px;color: #90949c;flex-shrink: 0}
.fish-enc-chart {display: flex;align-items: flex-end;gap: 4px;height: 76px;padding: 0 1px}
.fish-enc-chart-col {flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: flex-end;height: 100%}
.fish-enc-chart-col em {font-style: normal;font-size: 9px;font-weight: 700;color: #1877f2;margin-bottom: 2px}
.fish-enc-chart-col i {display: block;width: 100%;border-radius: 4px 4px 2px 2px;background: #cfe0fb;min-height: 3px}
.fish-enc-chart-col--peak i {background: linear-gradient(180deg, #1877f2 0%, #4b96f7 100%)}
.fish-enc-months {display: flex;gap: 4px;margin-top: 5px}
.fish-enc-months span {flex: 1;text-align: center;font-size: 9px;color: #90949c}
.fish-enc-months span.is-on {color: #1877f2;font-weight: 700}
.fish-enc-stack {display: flex;height: 12px;border-radius: 6px;overflow: hidden;gap: 2px}
.fish-enc-stack i {display: block}
.fish-enc-legend {margin-top: 9px;display: flex;flex-direction: column;gap: 7px}
.fish-enc-leg-row {display: flex;align-items: center;gap: 8px;font-size: 12px}
.fish-enc-leg-dot {width: 9px;height: 9px;border-radius: 3px;flex-shrink: 0}
.fish-enc-leg-name {font-weight: 600;color: #1c1e21}
.fish-enc-leg-size {color: #90949c;font-size: 10.5px}
.fish-enc-leg-count {margin-left: auto;font-size: 11.5px;color: #606770;white-space: nowrap}
.fish-enc-leg-count b {color: #1c1e21}
.fish-enc-recent-list {display: flex;flex-direction: column}
.fish-enc-recent-item {display: flex;gap: 10px;align-items: center;padding: 6px 0;text-decoration: none;color: inherit}
.fish-enc-recent-item + .fish-enc-recent-item {border-top: 1px solid #f0f2f5}
.fish-enc-recent-thumb {width: 50px;height: 50px;border-radius: 12px;overflow: hidden;flex-shrink: 0;background: #e4e6e9}
.fish-enc-recent-thumb img {width: 100%;height: 100%;object-fit: cover;display: block}
.fish-enc-recent-text {flex: 1;min-width: 0}
.fish-enc-recent-size {display: block;font-size: 14.5px;font-weight: 700;letter-spacing: -0.01em;color: #1c1e21}
.fish-enc-recent-size u {text-decoration: none;font-size: 11px;color: #606770;font-weight: 600}
.fish-enc-recent-who {font-size: 11.5px;color: #606770;margin-top: 2px;display: flex;align-items: center;gap: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fish-enc-recent-loc {font-size: 11px;color: #90949c;margin-top: 1px;display: flex;align-items: center;gap: 4px}
.fish-enc-recent-loc svg {width: 11px;height: 11px;flex-shrink: 0}
.fish-enc-recent-go {color: #c8ccd4;flex-shrink: 0;display: flex}
.fish-enc-recent-go svg {width: 16px;height: 16px}
.fish-enc-more {margin-top: 10px;display: flex;align-items: center;justify-content: center;gap: 5px;height: 38px;border-radius: 10px;border: 1px solid #e4e6e9;font-size: 12.5px;font-weight: 600;color: #1877f2;text-decoration: none}
.fish-enc-more svg {width: 13px;height: 13px;flex-shrink: 0}
.fish-enc-avatar {border-radius: 50%;object-fit: cover}
.fish-enc-cuisine-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 6px}
.fish-enc-cuisine-card {display: block;text-decoration: none;color: inherit;border-radius: 10px;overflow: hidden;transition: transform 0.15s ease, box-shadow 0.15s ease}
.fish-enc-cuisine-card:hover {text-decoration: none;color: inherit;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)}
.fish-enc-cuisine-img {position: relative;width: 100%;aspect-ratio: 1 / 1;background: linear-gradient(135deg, #fee2c7, #fcd3a4)}
.fish-enc-cuisine-img img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;filter: brightness(0.9)}
.fish-enc-cuisine-overlay {position: absolute;inset: 0;background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 45%,
rgba(0, 0, 0, 0.55) 100%
);display: flex;flex-direction: column;justify-content: flex-end;gap: 1px;padding: 6px 8px}
.fish-enc-cuisine-title {font-size: 0.72em;font-weight: 700;color: #fff;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fish-enc-cuisine-meta {font-size: 0.6em;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);overflow: hidden;text-overflow: ellipsis;white-space: nowrap}
.fish-enc-cuisine-more {display: flex;align-items: center;justify-content: center;gap: 4px;margin-top: 8px;padding: 8px;border-radius: 8px;background: #f0f2f5;color: #1877f2;font-size: 0.72em;font-weight: 700;text-decoration: none}
.fish-enc-cuisine-more:hover {background: #e4e6e9;color: #1877f2;text-decoration: none}
.fish-enc-cuisine-empty {padding: 16px 8px 8px;text-align: center}
.fish-enc-cuisine-empty-text {margin: 0 0 4px;color: #8b949e;font-size: 0.75em}
.fish-enc-scroll-hint {position: sticky;bottom: -20px;left: 0;right: 0;display: flex;justify-content: center;padding: 12px 0 8px;color: #8b949e;animation: fish-enc-scroll-bounce 1.5s ease-in-out infinite;pointer-events: none;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 40%)}
@keyframes fish-enc-scroll-bounce {0%, 100% { transform: translateY(0); }
50% { transform: translateY(6px); }}
@media (prefers-reduced-motion: reduce) {.fish-enc-scroll-hint {animation: none}}
.fish-enc-loading {display: flex;align-items: center;justify-content: center;gap: 8px;padding: 40px 16px;color: #8b949e;font-size: 0.8em}
.fish-enc-loading-spinner {width: 16px;height: 16px;border: 2px solid #e5e7eb;border-top-color: #1877f2;border-radius: 50%;animation: fish-enc-spin 0.6s linear infinite}
@keyframes fish-enc-spin {to { transform: rotate(360deg); }}
.fish-celebration-canvas {position: fixed;inset: 0;width: 100%;height: 100%;pointer-events: none;z-index: calc(var(--z-index-modal) + 50)}