body {



            margin: 0;



            padding: 0;



            height: 100%;



            display: flex;



            flex-direction: column;



            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;



        }







        #map {



            width: 100%;



            height: 100vh;



        }







        #info {



            position: fixed;



            bottom: 0;



            width: 100%;



            background-color: #f7f7f7;



            border-top: 1px solid #ddd;



            text-align: center;



            font-size: 18px;



            box-sizing: border-box;



            min-height: 50px;



            z-index: 1000;



            transition: transform 0.3s ease-in-out;



            display: flex;



            flex-direction: column;



        }







        #info-content {



            padding: 10px;



        }







        @media (max-width: 768px) {



            #info {



                font-size: 16px;



                min-height: 60px;



                text-align: left;



            }



            #info-content {



                padding-left: 15px;



                padding-right: 15px;



            }







            #info span:not(.info-word-link):not(.stat-link) {



                display: block;



                margin-bottom: 2px;



            }



        }







        @media (max-width: 480px) {



            #info {



                font-size: 14px;



                min-height: 70px;



            }



            #info-content {



                padding-left: 10px;



                padding-right: 10px;



            }







            #info span:not(.info-word-link):not(.stat-link) {



                display: block;



                margin-bottom: 1px;



            }



        }







        #info span {



            margin-right: 15px;



        }







        /* Modal ustawień kontekstu */



        #context-settings-modal {



            display: none;



            position: fixed;



            inset: 0;



            background: rgba(0,0,0,0.5);



            z-index: 9999;



            align-items: center;



            justify-content: center;



        }



        #context-settings-modal.visible {



            display: flex;



        }



        #context-settings-box {



            background: #fff;



            border-radius: 12px;



            padding: 20px 24px 16px;



            width: min(360px, 92vw);



            box-shadow: 0 8px 32px rgba(0,0,0,0.22);



        }



        #context-settings-box h3 {



            margin: 0 0 14px;



            font-size: 15px;



            color: #333;



        }



        .ctx-setting-row {



            display: flex;



            align-items: center;



            gap: 10px;



            padding: 7px 0;



            border-bottom: 1px solid #f0f0f0;



            font-size: 14px;



            cursor: pointer;



        }



        .ctx-setting-row:last-of-type { border-bottom: none; }



        .ctx-setting-row input[type=checkbox] {



            width: 17px; height: 17px; cursor: pointer; accent-color: #007bff;



        }



        #context-settings-close {



            margin-top: 14px;



            width: 100%;



            background: #007bff;



            color: #fff;



            border: none;



            border-radius: 7px;



            padding: 9px;



            font-size: 14px;



            cursor: pointer;



        }



        #btn-context-settings {



            background: transparent;



            border: none;



            cursor: pointer;



            font-size: 16px;



            padding: 0 4px;



            vertical-align: middle;



            opacity: 0.7;



            line-height: 1;



        }



        #btn-context-settings:hover { opacity: 1; }







        .payment-button {



            background-color: #4CAF50;



            color: white;



            padding: 8px 15px;



            text-align: center;



            border-radius: 5px;



            cursor: pointer;



            font-size: 14px;



            text-decoration: none;



            display: inline-block;



            margin: 5px;



            max-width: 250px;



            white-space: nowrap;



            overflow: hidden;



            text-overflow: ellipsis;



            border: none;



        }







        .date-range-btn {



            background: none;



            border: none;



            color: #1565c0;



            cursor: pointer;



            font-size: inherit;



            padding: 0;



            text-decoration: underline dotted;



            font-family: inherit;



        }



        .date-range-btn:hover { color: #0d47a1; }



        .tag-link-btn {



            background: none;



            border: none;



            cursor: pointer;



            font-size: inherit;



            padding: 0;



            font-weight: bold;



            font-family: inherit;



            text-decoration: underline dotted;



        }



        .tag-link-btn:hover { opacity: 0.75; }



        .payment-button:hover {



            background-color: #45a049;



        }







        .search-site-button {



            background-color: #007bff;



        }







        .search-site-button:hover {



            background-color: #0056b3;



        }







        .share-inline-btn {



            display: inline-flex;



            align-items: center;



            background-color: #007bff;



            color: white;



            border: none;



            border-radius: 4px;



            padding: 4px 10px;



            font-size: 13px;



            cursor: pointer;



            white-space: nowrap;



            transition: background-color 0.2s;



            margin-left: auto;



        }



        .share-inline-btn:hover {



            background-color: #0056b3;



        }







        .navigation-control {



            position: fixed;



            left: 10px;



            top: 50%;



            transform: translateY(-50%);



            z-index: 1000;



            background: white;



            border-radius: 4px;



            box-shadow: 0 1px 5px rgba(0,0,0,0.65);



            display: none;



        }







        .nav-button {



            width: 30px;



            height: 30px;



            background: white;



            border: 1px solid #ccc;



            border-radius: 4px;



            cursor: pointer;



            display: flex;



            justify-content: center;



            align-items: center;



            font-weight: bold;



            font-size: 18px;



            margin: 2px;



        }







        .nav-button:hover {



            background: #f4f4f4;



        }







        @media (min-width: 768px) {



            .navigation-control {



                display: block;



            }



        }



        



        #map-control {



            position: fixed;



            top: 10px;



            right: 10px;



            z-index: 9999;



            background: white;



            border-radius: 4px;



            box-shadow: 0 1px 5px rgba(0,0,0,0.65);



            transition: all 0.3s ease;



            min-width: 100px;



            max-width: 300px;



        }







        #map-control.collapsed {



            width: 40px;



            height: 40px;



            overflow: hidden;



        }







        #map-control-header {



            padding: 8px;



            cursor: pointer;



            display: flex;



            justify-content: space-between;



            align-items: center;



            border-bottom: 1px solid #ccc;



        }







        #map-control-content {



            padding: 10px;



            transition: height 0.3s ease;



            display: flex;



            flex-direction: column;



            gap: 5px;



        }







        #map-control.collapsed #map-control-content {



            display: none;



        }







        #map-control button#style-cycle {



            font-weight: normal;



            letter-spacing: 0;



        }







        #map-control button {



            margin: 0;



            padding: 8px 12px;



            background: #fff;



            border: 1px solid #ccc;



            border-radius: 4px;



            cursor: pointer;



            width: 100%;



            text-align: left;



            font-size: 14px;



        }







        #map-control button.active {



            background: #e9e9e9;



            font-weight: bold;



        }







        #map-control button:hover {



            background: #f4f4f4;



        }







        .toggle-icon {



            width: 20px;



            height: 20px;



            display: flex;



            justify-content: center;



            align-items: center;



            font-weight: bold;



            font-size: 20px;



        }







        .search-container {



            margin-top: 10px;



            display: flex;



            flex-direction: column;



            gap: 5px;



        }







        .search-container input {



            padding: 6px;



            border: 1px solid #ccc;



            border-radius: 3px;



        }







        .density-control {



            margin-top: 10px;



            display: flex;



            flex-direction: column;



        }







        .density-control label {



            margin-bottom: 5px;



            font-weight: bold;



        }







        .density-control input[type="range"] {



            width: 100%;



        }







        .date-label {



            font-weight: bold;



            text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;



            white-space: nowrap;



        }







        .date-label.actual {



            color: black;



            font-size: 14px;



            letter-spacing: -1px;



            font-stretch: condensed;



            line-height: 1.2;



            transform: scaleY(1.2) scaleX(0.9);



        }







        .date-label.actual.estimated {



            font-style: italic;



            color: #444;



        }







        .date-label.estimated div::before {



            content: "~";



        }







        .zoom-text-label {



            font-weight: 900;



            color: #111;



            font-size: 15px;



            text-shadow: 



                -1px -1px 0 #fff,  



                 1px -1px 0 #fff,



                -1px  1px 0 #fff,



                 1px  1px 0 #fff,



                 0 0 5px rgba(255,255,255,0.9);



            white-space: nowrap;



            text-align: center;



            cursor: pointer;



            transition: transform 0.1s;



        }



        .zoom-text-label:hover {



            transform: scale(1.1);



            color: #d32f2f;



        }







        .legend {



            padding: 8px;



            background: white;



            border-radius: 5px;



            box-shadow: 0 0 15px rgba(0,0,0,0.2);



            margin-top: 10px;



        }







        .legend-item {



            display: flex;



            align-items: center;



            margin: 5px 0;



        }







        .legend-color {



            width: 15px;



            height: 15px;



            margin-right: 8px;



            border-radius: 50%;



        }







        #gps-button {



            position: fixed;



            top: 60px;



            right: 10px;



            z-index: 1000;



            background: white;



            border: 2px solid #007bff;



            border-radius: 50%;



            padding: 10px;



            font-size: 20px;



            cursor: pointer;



            box-shadow: 0 2px 6px rgba(0,0,0,0.3);



            width: 44px;



            height: 44px;



            display: flex;



            justify-content: center;



            align-items: center;



            box-sizing: border-box;



        }



        #gps-button.active {



            background-color: #007bff;



            color: white;



        }







        #estimated-button {



             display: none;



        }



        



        .modal-overlay {



            position: fixed;



            top: 0;



            left: 0;



            width: 100%;



            height: 100%;



            background: rgba(0, 0, 0, 0.6);



            display: flex;



            justify-content: center;



            align-items: center;



            z-index: 10000;



        }







        .modal-content {



            background: white;



            padding: 25px;



            border-radius: 8px;



            max-width: 600px;



            width: 90%;



            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);



            position: relative;



            max-height: 80vh;



            overflow-y: auto;



        }







        .modal-content h2 {



            margin-top: 0;



        }







        .modal-close-button {



            position: absolute;



            top: 10px;



            right: 15px;



            font-size: 28px;



            font-weight: bold;



            cursor: pointer;



            color: #888;



        }



        .modal-close-button:hover {



            color: #333;



        }







        .menu-separator {



            height: 1px;



            background-color: #ccc;



            margin: 5px 0;



        }







        #qr-watermark {



            position: fixed;



            top: 10px;



            left: 10px;



            z-index: 99999;



            background: white;



            padding: 4px;



            border-radius: 4px;



            border: 2px solid rgba(0,0,0,0.2);



            box-shadow: 0 1px 5px rgba(0,0,0,0.65);



            width: 50px;



            height: 50px;



            display: flex;



            justify-content: center;



            align-items: center;



            pointer-events: none;



        }



        



        #qr-watermark img {



            width: 100%;



            height: 100%;



            display: block;



            image-rendering: pixelated;



        }







        .leaflet-bottom .leaflet-control-zoom {



            margin-bottom: 80px !important;



            margin-right: 10px !important;



        }







        #timeline-control {



            position: fixed;



            bottom: 0;



            left: 50%;



            transform: translateX(-50%);



            z-index: 1001;



            background: white;



            border-radius: 8px;



            box-shadow: 0 2px 8px rgba(0,0,0,0.3);



            padding: 8px 14px;



            display: none;



            flex-direction: column;



            align-items: center;



            gap: 4px;



            min-width: 280px;



            max-width: 90vw;



        }



        #timeline-control.visible { display: flex; }



        #timeline-label {



            font-weight: bold;



            font-size: 15px;



            color: #333;



        }



        #timeline-slider {



            width: 100%;



            cursor: pointer;



        }



        #timeline-row {



            display: flex;



            align-items: center;



            gap: 8px;



            width: 100%;



        }



        #timeline-play {



            background: #007bff;



            color: white;



            border: none;



            border-radius: 4px;



            padding: 4px 10px;



            cursor: pointer;



            font-size: 16px;



            flex-shrink: 0;



        }



        #timeline-play:hover { background: #0056b3; }







        #view-stats {



            position: fixed;



            bottom: 0;



            left: 0;



            width: 100%;



            background: #e8f0fe;



            border-top: 1px solid #c5d5f5;



            padding: 5px 12px;



            font-size: 13px;



            color: #333;



            display: none;



            text-align: center;



            flex-wrap: wrap;



            gap: 6px;



            justify-content: center;



            z-index: 1002;



            box-sizing: border-box;



        }



        #view-stats.visible { display: flex; }







        body.stats-open #info {



            padding-bottom: 34px;



        }







        #show-info-fab {



            position: fixed;



            bottom: 10px;



            left: 50%;



            transform: translateX(-50%);



            z-index: 1002;



            background: #333;



            color: white;



            border: none;



            border-radius: 20px;



            padding: 6px 16px;



            font-size: 13px;



            cursor: pointer;



            box-shadow: 0 2px 6px rgba(0,0,0,0.4);



            display: none;



        }



        #show-info-fab:hover { background: #555; }







        .leaflet-heatmap-layer { pointer-events: none; }







        #heatmap-legend {



            position: fixed;



            bottom: 170px;



            right: 10px;



            z-index: 1000;



            background: rgba(255,255,255,0.92);



            border-radius: 6px;



            padding: 6px 10px;



            font-size: 12px;



            box-shadow: 0 1px 5px rgba(0,0,0,0.35);



            display: none;



            flex-direction: column;



            gap: 3px;



            min-width: 80px;



        }



        #heatmap-legend.visible { display: flex; }



        .heatmap-legend-title {



            font-weight: bold;



            font-size: 11px;



            color: #555;



            margin-bottom: 2px;



            text-align: center;



        }



        .heatmap-legend-row {



            display: flex;



            align-items: center;



            gap: 6px;



            color: #333;



        }



        .heatmap-legend-dot {



            width: 12px;



            height: 12px;



            border-radius: 50%;



            flex-shrink: 0;



        }







        .stat-link {



            cursor: pointer;



            transition: color 0.2s, background-color 0.2s;



            padding: 2px 6px;



            border-radius: 4px;



        }



        .stat-link:hover {



            color: #007bff;



            background-color: rgba(0, 123, 255, 0.1);



            text-decoration: underline;



        }



        



        .pulse-circle {



            animation: pulsateOpacity 1.5s infinite alternate ease-in-out;



            pointer-events: none;



        }



        @keyframes pulsateOpacity {



            0% { fill-opacity: 0.1; stroke-opacity: 0.5; stroke-width: 2; }



            100% { fill-opacity: 0.4; stroke-opacity: 1; stroke-width: 4; }



        }







        .search-title-box {



            display: none;



            background: rgba(255, 255, 255, 0.9);



            padding: 8px 15px;



            border: 2px solid rgba(0,0,0,0.2);



            border-radius: 8px;



            font-weight: bold;



            font-size: 16px;



            box-shadow: 0 2px 6px rgba(0,0,0,0.3);



            backdrop-filter: blur(4px);



            margin-top: 80px !important;



            margin-left: 10px !important;



            pointer-events: auto;



        }







        .submenu-wrapper {



            position: relative;



        }



        .submenu-toggle {



            width: 100%;



            text-align: left;



        }



        .submenu-toggle::after {



            content: ' ▸';



            float: right;



            font-size: 12px;



            line-height: 1.6;



        }



        .submenu-toggle.open::after {



            content: ' ▾';



        }



        .submenu-items {



            display: none;



            flex-direction: column;



            gap: 3px;



            padding-left: 10px;



        }



        .submenu-items.open {



            display: flex;



        }



        .submenu-items button {



            font-size: 13px !important;



            padding: 6px 10px !important;



            border-left: 3px solid #ddd !important;



            border-radius: 0 4px 4px 0 !important;



        }



        .submenu-items button.active {



            border-left-color: #007bff !important;



        }







        .district-label {



            font-weight: bold;



            white-space: nowrap;



            text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;



            font-size: 13px;



            line-height: 1.2;



            color: #8b0000;



            letter-spacing: -0.5px;



        }



        .district-label.estimated-district {



            font-style: italic;



            color: #6b006b;



        }







        .info-word-link {



            cursor: pointer;



            border-radius: 3px;



            transition: background-color 0.15s, color 0.15s;



        }



        .info-word-link:hover {



            background-color: rgba(192, 57, 43, 0.12);



            color: #c0392b;



            text-decoration: underline;



        }







        #mayors-panel {



            position: fixed;



            top: 0;



            right: -350px;



            width: 320px;



            max-width: 90vw;



            height: 100vh;



            background: white;



            box-shadow: -2px 0 10px rgba(0,0,0,0.3);



            z-index: 10000;



            transition: right 0.3s ease, bottom 0.3s ease;



            display: flex;



            flex-direction: column;



            box-sizing: border-box;



        }



        #mayors-panel.visible {



            right: 0;



        }







        @media (max-width: 768px) {



            #mayors-panel {



                top: auto;



                bottom: -100%;



                right: 0 !important;



                left: 0;



                width: 100%;



                max-width: 100%;



                height: auto;



                max-height: 60vh;



                border-radius: 15px 15px 0 0;



                box-shadow: 0 -5px 15px rgba(0,0,0,0.2);



            }



            #mayors-panel.visible {



                bottom: 0;



            }



        }







        #mayors-panel-header {



            background: #f4f4f4;



            padding: 15px;



            font-weight: bold;



            display: flex;



            justify-content: space-between;



            align-items: center;



            border-bottom: 1px solid #ccc;



            border-radius: 15px 15px 0 0;



        }



        #mayors-panel-close {



            background: none;



            border: none;



            font-size: 22px;



            cursor: pointer;



            color: #888;



            padding: 0 5px;



        }



        #mayors-panel-close:hover {



            color: #d32f2f;



        }



        #mayors-filter-bar {



            padding: 10px 15px;



            background: #e8f0fe;



            border-bottom: 1px solid #c5d5f5;



            display: none;



            justify-content: space-between;



            align-items: center;



            font-size: 13px;



        }



        #mayors-filter-bar.visible {



            display: flex;



        }



        #mayors-filter-clear {



            background: #e74c3c;



            color: white;



            border: none;



            border-radius: 4px;



            padding: 4px 8px;



            cursor: pointer;



            transition: background 0.2s;



        }



        #mayors-filter-clear:hover {



            background: #c0392b;



        }



        #mayors-panel-hint {



            padding: 15px;



            font-size: 13px;



            color: #666;



            font-style: italic;



        }



        #mayors-panel-content {



            padding: 15px;



            flex: 1;



            overflow-y: auto;



        }



        .mayor-entry {



            border-bottom: 1px solid #eee;



            padding: 12px 0;



        }



        .mayor-entry:last-child {



            border-bottom: none;



        }



        .mayor-name-btn {



            background: none;



            border: none;



            color: #007bff;



            font-weight: bold;



            font-size: 15px;



            cursor: pointer;



            padding: 0;



            text-align: left;



            transition: color 0.2s;



        }



        .mayor-name-btn:hover {



            text-decoration: underline;



        }



        .mayor-year-range {



            font-size: 12px;



            color: #555;



            margin-top: 4px;



        }



        .mayor-notes {



            font-size: 13px;



            margin-top: 6px;



            color: #333;



            line-height: 1.4;



        }



        /* Czysty widok mapy dla skupisk historycznych. */
        body.historical-clusters-active #info,
        body.historical-clusters-active #view-stats,
        body.historical-clusters-active #show-info-fab,
        body.historical-clusters-active #timeline-control,
        body.historical-clusters-active #heatmap-legend,
        body.historical-clusters-active .map-footer {
            display: none !important;
        }

        /* --- FOOTER O STRONIE / WSPARCIE --- */



        .map-footer {



            position: fixed;



            bottom: 50px;



            left: 0;



            width: 100%;



            background: rgba(44, 62, 80, 0.9);



            color: #ddd;



            font-size: 12px;



            padding: 6px 12px;



            z-index: 999;



            display: flex;



            justify-content: center;



            gap: 20px;



            align-items: center;



            backdrop-filter: blur(4px);



            pointer-events: none;



        }



        .map-footer a {



            color: #aad4ff;



            text-decoration: underline;



            pointer-events: auto;



        }



        .map-footer .support-link {



            color: #fff;



            background: #28a745;



            padding: 2px 10px;



            border-radius: 4px;



            text-decoration: none;



            font-weight: 600;



            pointer-events: auto;



        }



        .map-footer .support-link:hover { background: #218838; }



        @media (max-width: 768px) {



            .map-footer { font-size: 10px; gap: 8px; flex-wrap: wrap; bottom: 0; padding: 4px 8px; }



        }







        /* ===== QUIZ PODRÓŻNIK - warstwa izolowana ===== */



        #quiz-panel {



            position: fixed;



            bottom: 55px;



            left: 50%;



            transform: translateX(-50%);



            z-index: 1003;



            background: #fff;



            border-radius: 14px;



            box-shadow: 0 8px 32px rgba(0,0,0,0.28);



            width: min(560px, 96vw);



            max-height: 72vh;



            overflow: hidden;



            display: none;



            flex-direction: column;



            border: 2px solid #007bff;



        }



        #quiz-panel.visible { display: flex; }



        /* Desktop: panel po lewej, mapa po prawej - nie zasłania strzałek */



        @media (min-width: 769px) {



            body.quiz-mode #quiz-panel {



                left: 0;



                right: auto;



                top: 0;



                bottom: 50px;



                transform: none;



                width: 420px;



                max-width: 38vw;



                max-height: none;



                height: auto;



                border-radius: 0;



                border: none;



                border-right: 3px solid #007bff;



                box-shadow: 4px 0 16px rgba(0,0,0,0.18);



            }



            body.quiz-mode #map {



                margin-left: 420px;



                width: calc(100% - 420px);



            }



            body.quiz-mode #map-control {



                right: 10px;



                left: auto;



            }



            body.quiz-mode #gps-button {



                right: 10px;



            }



            body.quiz-mode #qr-watermark {



                left: 430px;



            }



            body.quiz-mode .map-footer {



                left: 420px;



                width: calc(100% - 420px);



            }



        }



        @media (min-width: 1200px) {



            body.quiz-mode #quiz-panel { width: 460px; max-width: 36vw; }



            body.quiz-mode #map { margin-left: 460px; width: calc(100% - 460px); }



            body.quiz-mode #qr-watermark { left: 470px; }



            body.quiz-mode .map-footer { left: 460px; width: calc(100% - 460px); }



        }



        #quiz-header {



            background: linear-gradient(135deg, #007bff, #0056b3);



            color: #fff;



            padding: 10px 14px;



            display: flex;



            justify-content: space-between;



            align-items: center;



            gap: 8px;



            flex-wrap: wrap;



        }



        #quiz-header-title { font-weight: 800; font-size: 15px; letter-spacing: 0.2px; }



        #quiz-header-stats { font-size: 12px; opacity: 0.95; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }



        #quiz-header-stats b { color: #ffeb3b; }



        #quiz-close {



            background: rgba(255,255,255,0.2);



            border: none;



            color: #fff;



            border-radius: 6px;



            padding: 4px 8px;



            cursor: pointer;



            font-size: 16px;



            line-height: 1;



        }



        #quiz-close:hover { background: rgba(255,255,255,0.32); }



        #quiz-body {



            padding: 14px;



            overflow-y: auto;



            font-size: 14px;



            line-height: 1.5;



            color: #222;



        }



        .quiz-badge {



            display: inline-block;



            background: #e8f0fe;



            border: 1px solid #c5d5f5;



            border-radius: 20px;



            padding: 2px 10px;



            font-size: 12px;



            font-weight: 600;



            color: #1a3a6e;



        }



        .quiz-question { font-weight: 700; font-size: 15px; margin: 8px 0 6px; color: #111; }



        .quiz-sub { font-size: 12px; color: #666; margin-bottom: 10px; }



        .quiz-input-row {



            display: flex;



            gap: 8px;



            align-items: center;



            margin: 10px 0;



            flex-wrap: wrap;



        }



        .quiz-input-row input[type="number"] {



            width: 110px;



            padding: 8px 10px;



            border: 2px solid #007bff;



            border-radius: 8px;



            font-size: 16px;



            font-weight: 700;



            text-align: center;



        }



        .quiz-input-row input[type="range"] { flex: 1; min-width: 140px; accent-color: #007bff; }



        .quiz-btn {



            background: #007bff;



            color: #fff;



            border: none;



            border-radius: 8px;



            padding: 9px 16px;



            font-size: 14px;



            font-weight: 700;



            cursor: pointer;



            transition: background 0.15s;



        }



        .quiz-btn:hover { background: #0056b3; }



        .quiz-btn:disabled { background: #aaa; cursor: not-allowed; }



        .quiz-btn-secondary { background: #28a745; }



        .quiz-btn-secondary:hover { background: #218838; }



        .quiz-btn-ghost { background: #f0f0f0; color: #333; border: 1px solid #ddd; white-space: normal; overflow-wrap: break-word; }



        .quiz-btn-ghost:hover { background: #e0e0e0; }



        .quiz-result {



            border-radius: 10px;



            padding: 10px 12px;



            margin: 10px 0;



            font-size: 13px;



            line-height: 1.45;



        }



        .quiz-result.good { background: #e8f5e9; border: 1px solid #a5d6a7; color: #2e7d32; }



        .quiz-result.mid { background: #fff8e1; border: 1px solid #ffe082; color: #7a5c00; }



        .quiz-result.bad { background: #ffebee; border: 1px solid #ef9a9a; color: #8b0000; }



        .quiz-neighbor-grid {



            display: grid;



            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));



            gap: 6px;



            margin-top: 8px;



        }



        .quiz-neighbor-chip {



            background: #f7f7f7;



            border: 1px solid #ddd;



            border-radius: 8px;



            padding: 6px 8px;



            font-size: 12px;



            text-align: center;



            overflow-wrap: break-word;



            word-break: break-word;



            line-height: 1.35;



        }



        .quiz-progress { display:none; /* ukryty na życzenie */
  



            height: 6px;



            background: #e0e0e0;



            border-radius: 3px;



            overflow: hidden;



            margin: 6px 0 0;



        }



        .quiz-progress-bar { height: 100%; background: linear-gradient(90deg, #007bff, #28a745); width: 0%; transition: width 0.3s; }



        .quiz-journey-path { border-top: 1px dashed #ddd; margin-top: 10px; padding-top: 8px; font-size: 12px; color: #555; }



        @media (max-width: 768px) {



            #quiz-panel { bottom: 68px; width: 98vw; max-height: 64vh; border-radius: 14px 14px 0 0; }



            #quiz-header { padding: 8px 10px; }



            #quiz-header-title { font-size: 14px; }



            #quiz-body { padding: 10px; font-size: 13px; }



            .quiz-input-row { flex-direction: column; align-items: stretch; }



            .quiz-input-row input[type="number"] { width: 100%; }



            .quiz-neighbor-grid { grid-template-columns: 1fr 1fr; }



            /* Quiz-mode na mobile: panel na dole, mapa na górze - nie zasłania całkowicie */



            body.quiz-mode #quiz-panel {



                left: 0;



                right: 0;



                top: auto;



                bottom: 60px;



                width: 100%;



                max-width: 100%;



                max-height: 30vh;



                transform: none;



                border-radius: 16px 16px 0 0;



                border: none;



                border-top: 3px solid #007bff;



                box-shadow: 0 -4px 16px rgba(0,0,0,0.18);



            }



            body.quiz-mode #map {



                margin-left: 0;



                width: 100%;



                height: 68vh !important;

                max-height: 68vh;



            }



            body.quiz-mode .map-footer {



                left: 0;



                width: 100%;



                bottom: 60px;



            }



        }



        @media (max-width: 480px) {



            #quiz-panel { bottom: 74px; }



            #quiz-body { max-height: 52vh; }



        }



        .quiz-marker-pulse {



            animation: quizPulse 1.6s infinite alternate ease-in-out;



        }



        @keyframes quizPulse {



            0% { fill-opacity: 0.2; stroke-opacity: 0.6; }



            100% { fill-opacity: 0.45; stroke-opacity: 1; }



        }



        .quiz-arrow-label {



            background: rgba(255,255,255,0.92);



            border: 1px solid #007bff;



            border-radius: 6px;



            padding: 2px 6px;



            font-size: 11px;



            font-weight: 700;



            color: #007bff;



            text-align: center;



            white-space: nowrap;



            box-shadow: 0 1px 4px rgba(0,0,0,0.2);



        }

/* ===== ODKRYWANIE PUNKTÓW W POBLIŻU ===== */
.nearby-discovery {
    font-size: 13px;
    line-height: 1.35;
}

.nearby-discovery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    margin-bottom: 3px;
}

.nearby-refresh {
    border: 1px solid #ddd;
    background: #f7f7f7;
    color: #555;
    border-radius: 7px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 19px;
    line-height: 1;
}

.nearby-refresh:hover {
    background: #e9f2ff;
    color: #007bff;
}

.nearby-discovery-sub {
    color: #777;
    font-size: 11px;
    margin-bottom: 9px;
}

.nearby-highlight {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    padding: 7px 9px;
    margin-bottom: 9px;
    font-size: 12px;
}

.nearby-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nearby-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    border: 1px solid #e1e1e1;
    background: #fff;
    border-radius: 9px;
    padding: 8px 9px;
    cursor: pointer;
    color: #222;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}

.nearby-item:hover {
    border-color: #8bbcf0;
    background: #f7fbff;
}

.nearby-item:active {
    transform: translateY(1px);
}

.nearby-rank {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e8f0fe;
    color: #1a5fa7;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
}

.nearby-item-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nearby-item-main strong {
    font-size: 12px;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.nearby-item-main span {
    color: #666;
    font-size: 11px;
}

.nearby-distance {
    flex: 0 0 auto;
    color: #777;
    font-size: 11px;
    white-space: nowrap;
}

.nearby-discovery-footnote,
.nearby-empty {
    color: #777;
    font-size: 11px;
    margin-top: 9px;
}

@media (max-width: 768px) {
    .nearby-discovery-header {
        font-size: 16px;
    }

    .nearby-item {
        padding: 9px 8px;
    }
}


/* Eksperyment: narracyjne ciekawostki historyczne */
.nearby-stories {
    width: 100%;
}

.nearby-story-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.nearby-story {
    border: 1px solid #d9dee5;
    border-radius: 10px;
    padding: 13px;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0,0,0,.06);
}

.nearby-story:first-child {
    border-color: #8aa9bf;
    box-shadow: 0 3px 12px rgba(26,82,118,.12);
}

.nearby-story-type {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #66737f;
    margin-bottom: 5px;
}

.nearby-story h3 {
    margin: 0 0 7px;
    font-size: 17px;
    line-height: 1.2;
}

.nearby-story-meta {
    font-size: 11px;
    color: #68737d;
    margin-bottom: 9px;
    line-height: 1.4;
}

.nearby-story p {
    margin: 0 0 9px;
    font-size: 13px;
    line-height: 1.48;
    color: #30363b;
}

.nearby-story-context,
.nearby-story-people {
    margin-top: 7px;
    padding: 8px 9px;
    border-left: 3px solid #d4dbe1;
    background: #f7f8f9;
    font-size: 12px;
    line-height: 1.4;
}

.nearby-story-context span {
    display: block;
    margin-top: 3px;
    color: #707880;
    font-size: 11px;
}

.nearby-story-map {
    margin-top: 10px;
    border: 0;
    border-radius: 6px;
    padding: 7px 10px;
    background: #eef3f6;
    color: #1a5276;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

.nearby-story-map:hover {
    background: #e2ebf0;
}


/* Ciekawostki: mały panel na dole mapy, bez zasłaniania całego widoku */
#info.nearby-mode {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 24px));
    max-height: min(42vh, 430px);
    min-height: 0;
    border: 1px solid #d7dde3;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 18px rgba(0,0,0,.18);
    overflow: hidden;
    text-align: left;
}

#info.nearby-mode #info-content {
    padding: 12px 14px;
    overflow-y: auto;
}

.nearby-story-actions {
    display: flex;
    gap: 5px;
}

.nearby-prev,
.nearby-next,
.nearby-close {
    width: 30px;
    height: 30px;
    border: 1px solid #d5dbe0;
    border-radius: 7px;
    background: #f7f8f9;
    color: #4f5a63;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

 .nearby-prev:hover,
.nearby-next:hover,
.nearby-close:hover {
    background: #e9f1f6;
}

.nearby-story-body {
    margin: 0 0 9px;
    font-size: 14px;
    line-height: 1.5;
    color: #30363b;
}

.nearby-story-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    font-size: 11px;
    color: #737b82;
}

@media (max-width: 768px) {
    #info.nearby-mode {
        width: 100%;
        max-height: 36vh;
        border-radius: 12px 12px 0 0;
    }
}


/* Ciekawostki liczbowe */
.nearby-discovery-hint {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e8eb;
    font-size: 11px;
    color: #7a8187;
}


/* ===== SKUPISKA HISTORYCZNE ===== */
.historical-clusters-settings {
    margin: 2px 0 6px 0;
    padding: 7px 9px;
    border: 1px solid #dfe4e8;
    border-radius: 7px;
    background: #f7f8f9;
    font-size: 11px;
}

.historical-clusters-settings label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 0;
    color: #555;
}

.historical-clusters-settings select {
    min-width: 105px;
    padding: 3px 5px;
    border: 1px solid #ccd3d9;
    border-radius: 5px;
    background: #fff;
    color: #333;
    font-size: 11px;
}

#nearby-discovery-button.active {
    font-weight: 700;
}

#info.historical-clusters-mode {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, calc(100% - 24px));
    max-height: min(32vh, 300px);
    min-height: 0;
    border: 1px solid #d7dde3;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 18px rgba(0,0,0,.18);
    overflow: hidden;
    text-align: left;
}

#info.historical-clusters-mode #info-content {
    padding: 12px 14px;
    overflow-y: auto;
}

.historical-cluster-info {
    font-size: 13px;
    line-height: 1.45;
}

.historical-cluster-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    margin-bottom: 4px;
}

.historical-cluster-close {
    width: 30px;
    height: 30px;
    border: 1px solid #d5dbe0;
    border-radius: 7px;
    background: #f7f8f9;
    color: #4f5a63;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.historical-cluster-info p {
    margin: 7px 0;
}

.historical-cluster-meta {
    margin-top: 7px;
    padding: 7px 9px;
    border-left: 3px solid #d4dbe1;
    background: #f7f8f9;
    color: #606970;
    font-size: 11px;
    line-height: 1.4;
}

@media (max-width: 768px) {
    #info.historical-clusters-mode {
        width: 100%;
        max-height: 30vh;
        border-radius: 12px 12px 0 0;
    }
}


.historical-clusters-legend {
    position: fixed;
    right: 10px;
    bottom: 58px;
    z-index: 1000;
    width: 190px;
    padding: 8px 9px;
    border: 1px solid #dfe4e8;
    border-radius: 7px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
    font-size: 10px;
    color: #555;
}

.historical-clusters-legend-title {
    font-weight: 700;
    margin-bottom: 5px;
}

.historical-clusters-legend-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 8px;
}

.historical-clusters-legend-grid span {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.historical-clusters-legend-grid i {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.historical-cluster-date-label {
    background: transparent;
    border: 0;
}

.historical-cluster-date-label div {
    display: inline-block;
    padding: 3px 7px;
    border: 1px solid #777;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    color: #333;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
}


/* ===== LUDNOŚĆ TRÓJMIASTA ===== */
.population-info {
    font-size: 13px;
    line-height: 1.45;
}

.population-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 17px;
    margin-bottom: 8px;
}

.population-close {
    width: 30px;
    height: 30px;
    border: 1px solid #d5dbe0;
    border-radius: 7px;
    background: #f7f8f9;
    color: #4f5a63;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.population-close:hover {
    background: #eee7f2;
    color: #6a1b9a;
}

.population-current {
    padding: 8px 10px;
    border-radius: 8px;
    background: #f5eef8;
    border: 1px solid #dfcce7;
    font-size: 14px;
    margin-bottom: 7px;
}

.population-year {
    color: #666;
    font-size: 12px;
}

.population-approx {
    color: #7b1fa2;
    font-weight: 700;
}

.population-timeline-note {
    color: #666;
    font-size: 11px;
    margin: 5px 0 9px;
}

.population-history-label {
    color: #666;
    font-size: 11px;
    margin-top: 7px;
}

.population-chart {
    display: block;
    width: 100%;
    height: auto;
    margin: 7px 0 3px;
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

#population-button.active {
    font-weight: 700;
}


/* Ludność w Podróży w czasie */
.timeline-population { margin-top:8px; padding:7px 9px; border-top:1px solid #ddd; font-size:12px; line-height:1.45; }
.timeline-population-title { margin-bottom:3px; }
.timeline-population-rows { display:grid; grid-template-columns:1fr 1fr 1fr; gap:4px 10px; }
.timeline-population-rows span { color:#777; font-size:10px; }
@media (max-width:600px) { .timeline-population-rows { grid-template-columns:1fr; } }


/* Sekcja ludności w oknie informacji */
#population-context {
    margin: 10px 0 12px;
    padding: 9px 10px;
    border: 1px solid #e1e5e9;
    border-radius: 7px;
    background: #f8fafc;
    font-size: 13px;
    line-height: 1.4;
}
#population-context .population-context-title {
    font-weight: 700;
    margin-bottom: 3px;
}
#population-context .population-context-value {
    font-size: 15px;
    font-weight: 700;
}
#population-context .population-context-note {
    margin-top: 3px;
    color: #777;
    font-size: 11px;
}
.timeline-population {
    margin-top: 7px;
    padding: 6px 8px;
    border-top: 1px solid #ddd;
    font-size: 12px;
    line-height: 1.35;
}
.timeline-population-title { margin-bottom: 4px; }
.timeline-population-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px 8px; }
.timeline-population-city strong { font-size: 13px; }
.timeline-population-city span { font-weight: 600; }
.timeline-population-city span:last-child { color: #777; font-size: 10px; }
.timeline-population-rows span:not(:first-child) { color: #777; font-size: 10px; }
@media (max-width: 600px) { .timeline-population-rows { grid-template-columns: 1fr; } }


/* ===== WYBRANE INFORMACJE W OKNIE MAPY ===== */
.info-selected-module {
    margin: 6px 0;
    font-size: 13px;
    line-height: 1.4;
}
.info-build-date {
    font-size: 14px;
}
.info-object-notes {
    margin-top: 4px;
    font-size: 13px;
    color: #555;
}
#info-selected-context:empty {
    display: none;
}
#population-context {
    margin: 6px 0;
    padding: 7px 9px;
    border: 1px solid #e1e5e9;
    border-radius: 7px;
    background: #f8fafc;
}


/* ===== WSPÓLNY KONTEKST W PODRÓŻY W CZASIE ===== */
.timeline-context {
    width: 100%;
    margin-top: 6px;
    border-top: 1px solid #ddd;
    padding-top: 5px;
    font-size: 12px;
    line-height: 1.35;
    max-height: 32vh;
    overflow-y: auto;
}
.timeline-context-module {
    padding: 5px 7px;
    border-bottom: 1px dashed #ddd;
}
.timeline-context-module:last-child { border-bottom: 0; }
.timeline-context-title {
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 3px;
    color: #444;
}
.timeline-context-item {
    margin: 2px 0 2px 8px;
}
.timeline-context-sub {
    margin-top: 3px;
    color: #666;
    font-size: 11px;
}
.timeline-context-year {
    color: #888;
    font-size: 10px;
}
.timeline-context-note {
    color: #777;
    font-size: 10px;
}
.timeline-context-albums {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.timeline-context-albums .payment-button {
    margin: 0;
    padding: 3px 6px;
    font-size: 11px;
}
@media (max-width: 600px) {
    .timeline-context { max-height: 38vh; }
}


/* ===== PODRÓŻ W CZASIE – kompaktowy poziomy panel ===== */
#timeline-control {
    width: min(920px, 92vw);
    min-width: min(520px, 92vw);
    max-width: 92vw;
    box-sizing: border-box;
    padding: 7px 12px 8px;
    gap: 5px;
}
#timeline-header { width:100%; display:flex; align-items:center; justify-content:center; position:relative; }
#timeline-context-settings, #mayors-context-settings {
    border:1px solid #ccc; background:#fff; border-radius:5px; cursor:pointer; padding:2px 6px; font-size:15px;
}
#timeline-header #timeline-context-settings { position:absolute; right:0; }
#timeline-row { max-width:760px; }
.timeline-context {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0;
    width:100%;
    max-height:145px;
    overflow-y:auto;
    border-top:1px solid #ddd;
    padding-top:3px;
    margin-top:2px;
}
.timeline-context-module {
    min-width:0;
    padding:4px 8px;
    border-bottom:0;
    border-right:1px dashed #ddd;
    overflow:hidden;
}
.timeline-context-module:nth-child(3n) { border-right:0; }
.timeline-context-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mayors-panel-header { display:flex; align-items:center; justify-content:space-between; }
#mayors-panel-actions { display:flex; gap:4px; align-items:center; }
@media (max-width:700px) {
    #timeline-control { min-width:0; width:94vw; }
    .timeline-context { grid-template-columns:repeat(2, minmax(0,1fr)); max-height:180px; }
    .timeline-context-module:nth-child(3n) { border-right:1px dashed #ddd; }
    .timeline-context-module:nth-child(2n) { border-right:0; }
}
@media (max-width:480px) {
    .timeline-context { grid-template-columns:1fr; max-height:210px; }
    .timeline-context-module { border-right:0; border-bottom:1px dashed #ddd; }
}


/* ===== WSPÓLNY PANEL INFORMACJI — układ poziomy / pionowy ===== */
#info.info-layout-right {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(390px, 42vw);
    max-width: 42vw;
    min-height: 0;
    height: 100vh;
    border-top: 0;
    border-left: 1px solid #ddd;
    text-align: left;
    overflow-y: auto;
    box-shadow: -2px 0 8px rgba(0,0,0,0.12);
}

#info.info-layout-right #info-content {
    padding: 60px 14px 14px;
    flex: 0 0 auto;
    min-height: 0;
}

/* W panelu bocznym nie ograniczaj modułów do 40vh — cała zawartość ma być widoczna. */
#info.info-layout-right #info-selected-context {
    max-height: none !important;
    overflow-y: visible !important;
}

.ctx-layout-setting {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
}

.ctx-layout-setting > span {
    font-weight: 600;
    margin-bottom: 2px;
}

.ctx-layout-setting label {
    font-weight: normal;
    cursor: pointer;
}

@media (max-width: 768px) {
    #info.info-layout-right {
        width: 86vw;
        max-width: 86vw;
    }
}