.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-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-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-stats-compact {padding: 10px}
.fish-enc-month-label {width: 28px;min-width: 28px;font-size: 0.55em}
.fish-enc-spot-card {padding: 6px 8px}
.fish-enc-recent-img {height: 70px}}
.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-stats-compact {background: #f8fafc;border-radius: 10px;padding: 12px}
.fish-enc-stats-total {display: flex;align-items: baseline;gap: 4px;margin-bottom: 10px;padding-bottom: 8px;border-bottom: 1px solid #e5e7eb}
.fish-enc-stats-total-value {font-size: 1.5em;font-weight: 700;color: #1877f2;line-height: 1}
.fish-enc-stats-total-label {font-size: 0.8em;color: #606770}
.fish-enc-stats-table {width: 100%;border-collapse: collapse;font-size: 0.85em}
.fish-enc-stats-table th {font-weight: 500;color: #8b949e;text-align: center;padding: 0 4px 6px;font-size: 0.85em}
.fish-enc-stats-table th:first-child {text-align: left;width: 50px}
.fish-enc-stats-table td {text-align: center;padding: 5px 4px;color: #1c1e21;font-weight: 600}
.fish-enc-stats-table th.fish-enc-stats-table-label {text-align: left;font-weight: 500;color: #606770;font-size: 0.9em}
.fish-enc-stats-table tbody tr + tr {border-top: 1px solid #e5e7eb}
.fish-enc-stats-record-link {color: #d97706;text-decoration: none;font-weight: 700;transition: color 0.15s ease}
.fish-enc-stats-record-link:hover {color: #b45309;text-decoration: underline}
.fish-enc-monthly-chart {display: flex;flex-direction: column;gap: 3px}
.fish-enc-month-row {display: flex;align-items: center;gap: 6px}
.fish-enc-month-label {font-size: 0.6em;color: #606770;width: 32px;min-width: 32px;text-align: right;flex-shrink: 0}
.fish-enc-month-bar-bg {flex: 1;height: 14px;background: #f0f2f5;border-radius: 4px;overflow: hidden;position: relative}
.fish-enc-month-bar {height: 100%;background: #93c5fd;border-radius: 4px;position: relative;transition: width 0.4s ease;min-width: 0}
.fish-enc-month-bar--peak {background: #1877f2}
.fish-enc-month-val-inside {position: absolute;right: 4px;top: 50%;transform: translateY(-50%);font-size: 0.55em;font-weight: 600;color: #fff}
.fish-enc-month-val-outside {font-size: 0.55em;color: #8b949e;min-width: 16px;flex-shrink: 0}
.fish-enc-best-season {display: flex;align-items: center;gap: 6px;margin-top: 6px;font-size: 0.6em;color: #606770}
.fish-enc-best-season-dot {width: 10px;height: 10px;border-radius: 2px;background: #1877f2;flex-shrink: 0}
.fish-enc-spot-list {display: flex;flex-direction: column;gap: 6px}
.fish-enc-spot-card {display: flex;align-items: center;gap: 10px;padding: 8px 10px;border-radius: 10px;background: #f7f8fa}
.fish-enc-spot-icon {width: 32px;height: 32px;border-radius: 50%;background: #e7f3ff;color: #1877f2;display: flex;align-items: center;justify-content: center;flex-shrink: 0}
.fish-enc-spot-icon svg {width: 16px;height: 16px}
.fish-enc-spot-info {flex: 1;display: flex;flex-direction: column;min-width: 0}
.fish-enc-spot-name {font-size: 0.8em;font-weight: 600;color: #1c1e21}
.fish-enc-spot-detail {font-size: 0.65em;color: #606770}
.fish-enc-spot-pct {font-size: 0.7em;font-weight: 700;color: #1877f2;flex-shrink: 0}
.fish-enc-recent-list {display: flex;flex-direction: column;gap: 6px}
.fish-enc-recent-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-recent-card:hover {text-decoration: none;color: inherit;transform: translateY(-1px);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12)}
.fish-enc-recent-img {position: relative;width: 100%;height: 80px;background: linear-gradient(135deg, #dbeafe, #bfdbfe)}
.fish-enc-recent-img img {width: 100%;height: 100%;object-fit: cover;object-position: center;display: block;filter: brightness(0.85)}
.fish-enc-recent-overlay {position: absolute;inset: 0;background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.1) 0%,
rgba(0, 0, 0, 0.05) 40%,
rgba(0, 0, 0, 0.4) 100%
);display: flex;flex-direction: column;justify-content: space-between;padding: 6px 8px}
.fish-enc-recent-overlay-top {display: flex;justify-content: space-between;align-items: flex-start}
.fish-enc-recent-overlay-bottom {display: flex;justify-content: space-between;align-items: flex-end;min-width: 0}
.fish-enc-recent-size {font-size: 0.8em;font-weight: 700;color: #fff;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5)}
.fish-enc-recent-date {font-size: 0.6em;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);flex-shrink: 0}
.fish-enc-recent-user {font-size: 0.65em;font-weight: 600;color: #fff;text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-width: 0}
.fish-enc-recent-location {font-size: 0.6em;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);flex-shrink: 0;margin-left: 8px}
.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); }}