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

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #010408;
            color: #c0c8d0;
            overflow: hidden;
        }

        #map-container {
            width: 100vw;
            height: 100vh;
            height: 100dvh;
            position: relative;
        }

        canvas { display: block; width: 100%; height: 100%; touch-action: none; }

        .filters {
            position: absolute;
            bottom: 20px;
            left: 16px;
            display: flex;
            flex-direction: column;
            gap: 0;
            z-index: 10;
            opacity: 0.55;
            transition: opacity 0.3s;
            padding-bottom: env(safe-area-inset-bottom, 0px);
        }

        .filters:hover, .filters:focus-within { opacity: 0.95; }

        .filter-row {
            display: flex;
            align-items: center;
            border-radius: 3px;
            padding: 0 4px 0 0;
            transition: background 0.2s;
        }

        .filter-row:hover { background: rgba(255, 255, 255, 0.04); }

        .filter-btn {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 1px 0;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 11px;
            font-family: inherit;
            letter-spacing: 0.4px;
            transition: opacity 0.2s;
            opacity: 0.65;
        }

        .filter-btn:hover { opacity: 1; }
        .filter-btn.active { opacity: 1; }

        .filter-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            transition: box-shadow 0.2s, width 0.2s, height 0.2s;
        }

        .filter-btn.active .filter-dot {
            box-shadow: 0 0 8px currentColor;
            width: 9px;
            height: 9px;
        }

        .filter-btn.arthropoda { color: #00ffff; }
        .filter-btn.cnidaria { color: #4488ff; }
        .filter-btn.myzozoa { color: #00ff88; }
        .filter-btn.ctenophora { color: #cc44ff; }
        .filter-btn.proteobacteria { color: #ffdd00; }
        .filter-btn.mollusca { color: #ff6688; }
        .filter-btn.annelida { color: #ff8844; }
        .filter-btn.all { color: rgba(192, 200, 208, 0.5); }


        .filter-wiki {
            font-size: 0.6rem;
            color: rgba(68, 136, 255, 0.3);
            text-decoration: none;
            margin-left: 8px;
            opacity: 0;
            transition: opacity 0.25s, color 0.2s;
            pointer-events: none;
            white-space: nowrap;
        }
        .filter-row:hover .filter-wiki,
        .filter-wiki.visible { opacity: 1; pointer-events: auto; }
        .filter-wiki:hover { color: rgba(68, 136, 255, 0.8); }

        .help-icon {
            position: absolute;
            top: 16px;
            left: 16px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.2s ease;
        }

        .help-icon:hover {
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.7);
        }

        .help-modal {
            display: none;
            position: absolute;
            top: 52px;
            left: 16px;
            background: rgba(1, 4, 8, 0.95);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 16px 20px;
            z-index: 20;
            backdrop-filter: blur(12px);
            max-width: 280px;
            font-size: 0.8rem;
            line-height: 1.6;
        }

        .help-modal.active { display: block; }

        .help-modal .count {
            color: #00ff88;
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .help-modal .desc {
            color: rgba(192, 200, 208, 0.6);
            margin-bottom: 12px;
        }

        .help-modal a {
            color: rgba(68, 136, 255, 0.7);
            text-decoration: none;
            display: block;
            margin: 3px 0;
        }

        .help-modal a:hover { color: #4488ff; }

        .fullscreen-btn {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 28px;
            height: 28px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 10;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.4);
            transition: all 0.2s ease;
        }

        .fullscreen-btn:hover {
            background: rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.7);
        }

        .tooltip {
            position: absolute;
            background: rgba(1, 4, 8, 0.95);
            color: #c0c8d0;
            padding: 10px 14px;
            border-radius: 6px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.15s;
            font-size: 0.8rem;
            line-height: 1.5;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(8px);
            z-index: 1000;
            max-width: 260px;
        }

        .tooltip.visible { opacity: 1; }
        .tooltip-title { font-weight: 600; font-style: italic; margin-bottom: 4px; font-size: 0.85rem; color: #e0e6ed; }
        .tooltip-detail { color: rgba(160, 176, 192, 0.7); margin: 1px 0; }

        @media (max-width: 768px) {
            .filters {
                bottom: 28px;
                left: 12px;
                opacity: 0.8;
                background: rgba(1, 4, 8, 0.5);
                border-radius: 6px;
                padding: 6px 8px;
                padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
            }
            .filters:hover, .filters:focus-within { opacity: 1; }
            .filter-btn { font-size: 11px; padding: 2px 2px; }
            .filter-dot { width: 9px; height: 9px; }
            .filter-btn.active .filter-dot { width: 10px; height: 10px; }
            .filter-row { padding: 0 6px 0 0; min-height: 24px; }
            .filter-wiki {
                opacity: 0.4;
                pointer-events: auto;
                font-size: 0.6rem;
            }
            .filter-wiki.visible { opacity: 0.9; }
            .help-icon, .fullscreen-btn {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }
            .help-modal {
                max-width: calc(100vw - 24px);
                font-size: 0.75rem;
            }
            .tooltip {
                left: 50% !important;
                top: auto !important;
                bottom: 80px;
                transform: translateX(-50%);
                max-width: 80vw;
                font-size: 12px;
            }
        }