.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-start;position: relative}
.fish-encyclopedia-title-area {flex: 1}
.fish-encyclopedia-label {display: inline-block;background: rgba(255, 255, 255, 0.2);color: rgba(255, 255, 255, 0.9);font-size: 0.65em;font-weight: 600;padding: 4px 10px;border-radius: 4px;letter-spacing: 1.5px;margin-bottom: 8px;text-transform: uppercase}
.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%, #f59e0b 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}
.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}
.fish-encyclopedia-close:hover {background: rgba(255, 255, 255, 0.25)}
.fish-encyclopedia-image {background: #1c1e21;display: flex;justify-content: center;align-items: center;padding: 8px}
.fish-caught-image {width: 100%;max-height: 120px;object-fit: contain;border-radius: 4px}
.fish-encyclopedia-body {padding: 14px 16px}
.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, #f59e0b);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-size-card {background: #f7f8fa;border: 1px solid #e4e6e9;border-radius: 8px;padding: 8px 10px;display: flex;align-items: center;gap: 8px}
.fish-size-icon {width: 32px;height: 32px;background: #e7f3ff;border-radius: 8px;display: flex;align-items: center;justify-content: center;color: #1877f2;flex-shrink: 0}
.fish-size-content {display: flex;flex-direction: column}
.fish-size-label {color: #606770;font-size: 0.65em;font-weight: 600;text-transform: uppercase;letter-spacing: 0.3px}
.fish-size-value {color: #1c1e21;font-size: 0.85em;font-weight: 600}
.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: #f59e0b;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: #3b82f6;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-caught-image {max-height: 100px}
.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-size-card {padding: 6px 8px}
.fish-size-icon {width: 28px;height: 28px}
.fish-warning {padding: 8px 10px}
.fish-warning-icon {width: 30px;height: 30px}
.fish-encyclopedia-footer {padding: 8px 12px 10px}}