@font-face {
            font-family: 'LowerPixel';
            src: url('assets/fonts/lower-pixel.regular.otf') format('opentype');
            font-weight: normal;
            font-style: normal;
        }

        /* ── Ensure topnav always sits above game overlays ── */
        .topbar {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            z-index: 10000 !important;
        }
        /* Push all page content below the fixed topnav */
        body { padding-top: 53px !important; }
        /* Keep all overlays below the topnav */
        #auth-overlay,
        .auth-overlay-wrap,
        .modal-overlay { top: 53px !important; }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'LowerPixel', 'Courier New', monospace;
            background-color: #0a0e27;

            background-size: cover;
            background-position: center top;
            background-attachment: scroll;
            background-repeat: no-repeat;
            display: block;
            min-height: 100vh;
            padding: 0;
        }

        /* ── BROWSER BACKGROUND TRANSITION LAYERS ────────────── */
        #bg-layer-a,
        #bg-layer-b {
            position: fixed;
            inset: 0;
            z-index: -1;
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            transition: opacity 4s ease-in-out;
            pointer-events: none;
        }

        /* ── AUTH OVERLAY ─────────────────────────────────────── */
        #auth-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(5, 8, 20, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #auth-overlay.hidden {
            display: none;
        }

        .auth-box {
            background: #0d1535;
            border: 2px solid #4fc3f7;
            border-radius: 10px;
            padding: 36px 40px;
            width: 340px;
            box-shadow: 0 0 40px rgba(79, 195, 247, 0.3);
            text-align: center;
        }

        .auth-box h2 {
            color: #4fc3f7;
            letter-spacing: 3px;
            margin-bottom: 6px;
            font-size: 1.5em;
        }

        .auth-box p {
            color: #546e7a;
            font-size: 0.8em;
            margin-bottom: 24px;
        }

        .auth-tabs {
            display: flex;
            margin-bottom: 22px;
            border-bottom: 1px solid #1e3a6a;
        }

        .auth-tab {
            flex: 1;
            padding: 8px;
            cursor: pointer;
            color: #546e7a;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.85em;
            letter-spacing: 1px;
            background: none;
            border: none;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }

        .auth-tab.active {
            color: #4fc3f7;
            border-bottom-color: #4fc3f7;
        }

        .auth-input {
            width: 100%;
            padding: 10px 12px;
            margin-bottom: 12px;
            background: #0a1030;
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            color: #e0f7fa;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.9em;
            outline: none;
            transition: border-color 0.2s;
        }

        .auth-input:focus {
            border-color: #4fc3f7;
        }

        .auth-btn {
            width: 100%;
            padding: 11px;
            margin-top: 4px;
            background: linear-gradient(135deg, #1565c0, #0d47a1);
            border: 1px solid #4fc3f7;
            border-radius: 5px;
            color: #e0f7fa;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.9em;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .auth-btn:hover {
            background: linear-gradient(135deg, #1976d2, #1565c0);
            box-shadow: 0 0 12px rgba(79, 195, 247, 0.4);
        }

        #auth-error {
            color: #ff5555;
            font-size: 0.8em;
            margin-top: 10px;
            min-height: 18px;
            letter-spacing: 0.5px;
        }

        /* ── LEADERBOARD PANEL ────────────────────────────────── */
        #leaderboard-panel {
            width: 190px;
            flex-shrink: 0;
            background: rgba(10, 14, 40, 0.85);
            border: 2px solid #1e3a6a;
            border-radius: 6px;
            padding: 10px 0 0;
            position: sticky;
            top: 70px;
        }

        #leaderboard-panel h3 {
            color: #ffd700;
            font-size: 0.72em;
            letter-spacing: 2px;
            text-align: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #1e3a6a;
            margin-bottom: 6px;
        }

        #lb-rows {
            padding: 0 8px;
        }

        .lb-row {
            display: grid;
            grid-template-columns: 22px 1fr auto;
            align-items: center;
            gap: 4px;
            font-size: 0.73em;
            padding: 4px 2px;
            border-bottom: 1px solid rgba(30, 58, 106, 0.4);
        }

        .lb-row:last-child {
            border-bottom: none;
        }

        .lb-rank {
            color: #546e7a;
            text-align: center;
            font-size: 0.9em;
        }

        .lb-rank.gold {
            color: #ffd700;
            font-weight: bold;
        }

        .lb-rank.silver {
            color: #c0c0c0;
            font-weight: bold;
        }

        .lb-rank.bronze {
            color: #cd7f32;
            font-weight: bold;
        }

        .lb-name {
            color: #e0f7fa;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .lb-name.is-me {
            color: #4fc3f7;
            font-weight: bold;
        }

        .lb-coins {
            color: #ffd700;
            text-align: right;
            white-space: nowrap;
        }
        .lb-combo {
            font-size: 0.75em;
            color: #4fc3f7;
            margin-left: 4px;
            opacity: 0.85;
        }

        #lb-empty {
            color: #3a5a7a;
            font-size: 0.72em;
            text-align: center;
            padding: 10px 0;
        }

        #lb-refresh {
            display: block;
            width: calc(100% - 16px);
            margin: 8px 8px 10px;
            padding: 6px;
            background: none;
            border: 1px solid #1e3a6a;
            border-radius: 4px;
            color: #546e7a;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.7em;
            cursor: pointer;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        #lb-refresh:hover {
            border-color: #4fc3f7;
            color: #4fc3f7;
        }

        /* ── CATCH LOG ────────────────────────────────────────── */
        #catch-log {
            width: 178px;
            flex-shrink: 0;
            background: rgba(10, 14, 40, 0.85);
            border: 2px solid #1e3a6a;
            border-radius: 6px;
            padding: 10px 0 0;
            position: sticky;
            top: 70px;
        }

        #catch-log h3 {
            color: #4fc3f7;
            font-size: 0.72em;
            letter-spacing: 2px;
            text-align: center;
            padding-bottom: 8px;
            border-bottom: 1px solid #1e3a6a;
            margin-bottom: 8px;
        }

        #catch-entries {
            display: flex;
            flex-direction: column;
            gap: 5px;
            padding: 0 10px;
            min-height: 40px;
        }

        .catch-entry {
            display: grid;
            grid-template-columns: 1fr auto auto;
            align-items: center;
            gap: 4px;
            font-size: 0.75em;
            letter-spacing: 0.5px;
        }

        .catch-name {
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .catch-count {
            opacity: 0.75;
            text-align: right;
        }

        .catch-worth {
            text-align: right;
            font-size: 0.88em;
            opacity: 0.9;
        }

        .empty-log {
            color: #3a5a7a;
            font-size: 0.72em;
            text-align: center;
            padding: 6px 0;
            letter-spacing: 1px;
        }

        #catch-total {
            border-top: 1px solid #1e3a6a;
            margin-top: 10px;
            padding: 8px 10px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.78em;
        }

        #catch-total .total-label {
            color: #4fc3f7;
            letter-spacing: 1px;
            font-weight: bold;
        }

        #catch-total .total-value {
            color: #ffd700;
            font-weight: bold;
            font-size: 1.1em;
            text-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
        }

        /* ── MAIN LAYOUT ──────────────────────────────────────── */
        .layout {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            justify-content: center;
            width: 100%;
            max-width: 1680px;
            margin: 0 auto;
            padding: 20px 20px 0;
        }

        .container {
            width: 100%;
            max-width: 1210px;
        }

        .game-header {
            text-align: center;
            margin-bottom: 16px;
            color: #4fc3f7;
            text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
        }

        .game-header h1 {
            font-size: 2.4em;
            letter-spacing: 4px;
        }

        .game-header p {
            opacity: 0.7;
            margin-top: 4px;
        }

        /* ── USER BAR ─────────────────────────────────────────── */
        #user-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(13, 21, 53, 0.8);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            padding: 7px 14px;
            margin-bottom: 12px;
            font-size: 0.82em;
        }

        #user-bar .ub-left {
            color: #4fc3f7;
        }

        #user-bar .ub-left span {
            color: #ffd700;
            font-weight: bold;
        }

        #logout-btn {
            background: none;
            border: 1px solid #1e3a6a;
            border-radius: 4px;
            color: #546e7a;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.85em;
            padding: 4px 10px;
            cursor: pointer;
            transition: all 0.2s;
            letter-spacing: 1px;
        }

        #logout-btn:hover {
            border-color: #ff5555;
            color: #ff5555;
        }

        .stats-bar {
            display: flex;
            gap: 10px;
            justify-content: center;
            margin-bottom: 14px;
            flex-wrap: nowrap;
        }

        .stat {
            background: linear-gradient(135deg, #1a237e, #0d47a1);
            border: 2px solid #4fc3f7;
            padding: 8px 12px 6px;
            border-radius: 5px;
            color: #4fc3f7;
            min-width: 0;
            flex: 1;
            text-align: center;
            box-shadow: 0 0 10px rgba(79, 195, 247, 0.25);
        }

        .stat-label {
            font-size: 0.75em;
            opacity: 0.7;
        }

        .stat-value {
            font-size: 1.3em;
            font-weight: bold;
            color: #ffeb3b;
            margin-top: 8px;
        }

        .r-common {
            color: #76ff03 !important
        }

        .r-uncommon {
            color: #00bfff !important
        }

        .r-rare {
            color: #dd88ff !important
        }

        .r-legendary {
            color: #ffaa00 !important;
            text-shadow: 0 0 8px #ffaa00
        }

        #gameCanvas {
            display: block;
            margin: 0 auto;
            border: 4px solid #4fc3f7;
            box-shadow: 0 0 24px rgba(79, 195, 247, 0.5);
            cursor: none;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
            max-width: 100%;
            will-change: contents;
            contain: strict;
        }

        #canvas-wrap {
            position: relative;
            display: flex;
            justify-content: center;
        }

        #aim-badge {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            align-items: center;
            gap: 8px;
            color: #80d8ff;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.66em;
            letter-spacing: 1.5px;
            padding: 7px 14px 7px 10px;
            border: 1px solid #1e3a6a;
            border-radius: 999px;
            background: rgba(13, 21, 53, 0.4);
            z-index: 50;
            transition: color 0.15s, border-color 0.15s, background 0.15s;
        }

        #aim-badge.clickable {
            pointer-events: auto;
            cursor: pointer;
        }

        #aim-badge:not(.clickable) {
            pointer-events: none;
        }

        #aim-badge.hidden {
            display: none;
        }

        #aim-badge-icon {
            font-size: 1.1em;
            line-height: 1;
        }

        #aim-badge.active {
            color: #76ff03;
            border-color: #76ff03;
            background: rgba(118, 255, 3, 0.12);
        }

        #crosshair {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            width: 24px;
            height: 24px;
        }

        #crosshair::before,
        #crosshair::after {
            content: '';
            position: absolute;
            background: rgba(224, 247, 250, 0.85);
        }

        #crosshair::before {
            width: 100%;
            height: 1px;
            top: 50%;
            left: 0;
        }

        #crosshair::after {
            width: 1px;
            height: 100%;
            left: 50%;
            top: 0;
        }

        #crosshair-dot {
            position: fixed;
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            border: 1px solid rgba(224, 247, 250, 0.85);
            border-radius: 50%;
        }

        .instructions {
            margin-top: 14px;
            padding: 12px 16px;
            background: rgba(26, 35, 126, 0.45);
            border-left: 4px solid #4fc3f7;
            color: #b0bec5;
            font-size: 0.88em;
            line-height: 1.7;
        }

        .instructions h3 {
            color: #4fc3f7;
            margin-bottom: 6px;
        }

        .instructions ol {
            margin-left: 18px;
        }

        /* ── MODAL OVERLAYS (How to Play & Sounds) ───────────── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            z-index: 1000;
            background: rgba(5, 8, 20, 0.95);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-overlay.hidden {
            display: none;
        }

        .modal-box {
            background: #0d1535;
            border: 2px solid #4fc3f7;
            border-radius: 10px;
            padding: 32px 36px;
            width: 400px;
            box-shadow: 0 0 40px rgba(79, 195, 247, 0.3);
            position: relative;
        }

        .settings-modal-box {
            max-height: min(560px, calc(100vh - 120px));
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #1e3a6a transparent;
        }

        .settings-modal-box::-webkit-scrollbar {
            width: 8px;
        }

        .settings-modal-box::-webkit-scrollbar-thumb {
            background: #1e3a6a;
            border-radius: 4px;
        }

        .settings-modal-box::-webkit-scrollbar-track {
            background: transparent;
        }

        .modal-box h2 {
            color: #4fc3f7;
            letter-spacing: 3px;
            margin-bottom: 18px;
            font-size: 1.2em;
            text-align: center;
        }

        .modal-close {
            position: absolute;
            top: 12px;
            right: 14px;
            background: none;
            border: none;
            color: #546e7a;
            font-size: 1.1em;
            cursor: pointer;
            font-family: 'LowerPixel', 'Courier New', monospace;
            transition: color 0.2s;
            letter-spacing: 1px;
        }

        .modal-close:hover {
            color: #ff5555;
        }

        /* How to Play modal content */
        .modal-box ol {
            color: #b0bec5;
            font-size: 0.88em;
            line-height: 1.8;
            margin-left: 18px;
        }

        /* Sounds modal content */
        .sound-row {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 14px;
            color: #4fc3f7;
            font-size: 0.82em;
            letter-spacing: 1px;
        }

        .sound-row span {
            width: 70px;
            flex-shrink: 0;
        }

        .sound-row input[type="range"] {
            flex: 1;
        }

        /* ── SETTINGS MODAL ───────────────────────────────────── */
        .settings-tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 18px;
            border-bottom: 1px solid #1e3a6a;
            padding-bottom: 10px;
        }

        .settings-tab {
            flex: 1;
            background: rgba(13, 21, 53, 0.8);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            color: #546e7a;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.8em;
            padding: 8px 10px;
            cursor: pointer;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        .settings-tab:hover {
            border-color: #4fc3f7;
            color: #4fc3f7;
        }

        .settings-tab.active {
            border-color: #4fc3f7;
            color: #4fc3f7;
            background: rgba(79, 195, 247, 0.1);
            box-shadow: 0 0 8px rgba(79, 195, 247, 0.25);
        }

        .settings-panel.hidden {
            display: none;
        }

        .sensitivity-value {
            text-align: center;
            color: #76ff03;
            font-size: 0.8em;
            letter-spacing: 1px;
            margin: 4px 0 12px;
        }

        .settings-hint {
            color: #546e7a;
            font-size: 0.74em;
            line-height: 1.6;
            letter-spacing: 0.5px;
            text-align: center;
            margin-top: 4px;
            margin-bottom: 4px;
        }

        .settings-divider {
            border-top: 1px solid #1e3a6a;
            margin: 18px 0 14px;
        }

        .settings-subheading {
            color: #4fc3f7;
            font-size: 0.8em;
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 12px;
        }

        #lockmode-keybind-btn.capturing {
            color: #ffaa00;
            border-color: #ffaa00;
        }

        #modal-mute-btn {
            width: 100%;
            margin-top: 6px;
            padding: 9px;
            background: none;
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            color: #546e7a;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.88em;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s;
        }

        #modal-mute-btn:hover {
            border-color: #ff5555;
            color: #ff5555;
        }

        #modal-mute-btn.muted {
            border-color: #ff5555;
            color: #ff5555;
        }

        /* ── TOOLBAR BUTTONS ──────────────────────────────────── */
        .toolbar-buttons {
            display: flex;
            gap: 8px;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
        }

        .toolbar-right {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .toolbar-btn {
            background: rgba(13, 21, 53, 0.8);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            color: #4fc3f7;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.8em;
            padding: 6px 14px;
            cursor: pointer;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        .toolbar-btn:hover {
            border-color: #4fc3f7;
            box-shadow: 0 0 8px rgba(79, 195, 247, 0.3);
        }

        /* ── D/N CYCLE MODAL ──────────────────────────────────── */
        .dn-option {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 14px;
            margin-bottom: 10px;
            border: 1px solid #1e3a6a;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            background: rgba(10, 14, 40, 0.5);
        }

        .dn-option:hover {
            border-color: #4fc3f7;
            background: rgba(79, 195, 247, 0.07);
        }

        .dn-option.active {
            border-color: #4fc3f7;
            background: rgba(79, 195, 247, 0.12);
            box-shadow: 0 0 10px rgba(79, 195, 247, 0.2);
        }

        .dn-option-icon {
            font-size: 1.5em;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .dn-option-text strong {
            display: block;
            color: #4fc3f7;
            font-size: 0.85em;
            letter-spacing: 1px;
            margin-bottom: 3px;
        }

        .dn-option-text span {
            color: #546e7a;
            font-size: 0.74em;
            line-height: 1.5;
            letter-spacing: 0.5px;
        }

        .dn-option.active .dn-option-text strong {
            color: #80d8ff;
        }

        .dn-active-label {
            text-align: center;
            font-size: 0.72em;
            letter-spacing: 1px;
            margin-top: 14px;
            padding-top: 10px;
            border-top: 1px solid #1e3a6a;
            color: #546e7a;
        }

        .dn-active-label span {
            color: #4fc3f7;
        }

        /* ── IN-GAME CLOCK ───────────────────────────────────── */
        #ingame-clock {
            display: flex;
            align-items: center;
            gap: 7px;
            background: rgba(13, 21, 53, 0.85);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            padding: 5px 12px 5px 10px;
            font-size: 0.82em;
            letter-spacing: 1px;
            color: #4fc3f7;
            user-select: none;
            transition: border-color 0.5s, color 0.5s;
            min-width: 108px;
        }

        #ingame-clock.is-night {
            border-color: #3a2a6a;
            color: #b39ddb;
        }

        #ingame-clock.is-dawn,
        #ingame-clock.is-dusk {
            border-color: #7a4a1a;
            color: #ffb74d;
        }

        #clock-icon {
            font-size: 1.15em;
            line-height: 1;
        }

        #clock-time {
            font-size: 1.1em;
            font-weight: bold;
            min-width: 46px;
            text-align: left;
        }

        #clock-period {
            font-size: 0.72em;
            opacity: 0.75;
            min-width: 20px;
        }

        /* ── SAVING INDICATOR ─────────────────────────────────── */
        #save-indicator {
            position: fixed;
            bottom: 18px;
            right: 20px;
            z-index: 500;
            background: rgba(10, 14, 40, 0.9);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            padding: 6px 12px;
            font-size: 0.75em;
            color: #546e7a;
            letter-spacing: 1px;
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        #save-indicator.show {
            opacity: 1;
        }

        #save-indicator.ok {
            color: #76ff03;
            border-color: #76ff03;
        }

        #save-indicator.err {
            color: #ff5555;
            border-color: #ff5555;
        }



        /* ── ANGLER'S BOOK MODAL ──────────────────────────────── */
        .ab-modal-box {
            width: 480px;
            min-height: 360px;
            display: flex;
            flex-direction: column;
        }

        .ab-content {
            flex: 1;
            min-height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Intro page */
        .ab-intro {
            text-align: center;
            padding: 16px 8px;
        }

        .ab-intro-icon {
            font-size: 3em;
            margin-bottom: 12px;
        }

        .ab-intro-text {
            color: #b0bec5;
            font-size: 0.95em;
            letter-spacing: 1px;
            margin-bottom: 8px;
            line-height: 1.6;
        }

        .ab-intro-sub {
            color: #546e7a;
            font-size: 0.78em;
            letter-spacing: 1px;
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .ab-fish-count {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            border: 1px solid #1e3a6a;
            border-radius: 8px;
            padding: 12px 28px;
            background: rgba(10, 14, 40, 0.6);
        }

        .ab-fc-num {
            font-size: 1.8em;
            color: #4fc3f7;
            letter-spacing: 2px;
        }

        .ab-fc-label {
            font-size: 0.7em;
            color: #546e7a;
            letter-spacing: 2px;
        }

        /* Fish pages */
        .ab-fish-page {
            display: flex;
            gap: 24px;
            align-items: center;
            width: 100%;
            padding: 8px 0;
        }

        .ab-fish-img-wrap {
            flex-shrink: 0;
            width: 180px;
            height: 180px;
            border: 2px solid #1e3a6a;
            border-radius: 10px;
            background: rgba(10, 14, 40, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .ab-fish-img {
            image-rendering: pixelated;
            max-width: 150px;
            max-height: 150px;
            object-fit: contain;
			width: 50%;
        }

        .ab-img-fallback {
            font-size: 3em;
        }

        /* Unknown fish — question mark */
        .ab-question-mark {
            font-size: 5em;
            color: #1e3a6a;
            font-family: 'Bebas Neue', sans-serif;
            line-height: 1;
            user-select: none;
        }

        .ab-fish-unknown .ab-fish-img-wrap {
            border-color: #0d1e40;
            background: rgba(5, 8, 20, 0.8);
        }

        /* Fish info panel */
        .ab-fish-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .ab-fish-name {
            font-size: 1.15em;
            letter-spacing: 3px;
            font-family: 'LowerPixel', 'Courier New', monospace;
        }

        .ab-fish-rarity {
            font-size: 0.72em;
            letter-spacing: 3px;
            opacity: 0.85;
        }

        .ab-fish-type {
            font-size: 0.75em;
            color: #546e7a;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .ab-stats-grid {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .ab-stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            padding: 5px 10px;
            background: rgba(10, 14, 40, 0.5);
        }

        .ab-stat-label {
            font-size: 0.65em;
            letter-spacing: 2px;
            color: #546e7a;
        }

        .ab-stat-val {
            font-size: 0.85em;
            letter-spacing: 1px;
        }

        /* Navigation */
        .ab-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 18px;
            gap: 12px;
        }

        .ab-nav-btn {
            background: rgba(13, 21, 53, 0.8);
            border: 1px solid #1e3a6a;
            border-radius: 5px;
            color: #4fc3f7;
            font-family: 'LowerPixel', 'Courier New', monospace;
            font-size: 0.78em;
            padding: 7px 16px;
            cursor: pointer;
            letter-spacing: 1px;
            transition: all 0.2s;
        }

        .ab-nav-btn:hover:not(:disabled) {
            border-color: #4fc3f7;
            box-shadow: 0 0 8px rgba(79, 195, 247, 0.3);
        }

        .ab-nav-btn:disabled {
            opacity: 0.3;
            cursor: default;
        }

        .ab-page-label {
            font-size: 0.75em;
            color: #546e7a;
            letter-spacing: 2px;
            text-align: center;
            flex: 1;
        }