/* ===== sky-pixel-clean-mobile-modal-fix ===== */
.sky-pixel-cloud-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
            margin: 10px 0 0;
            box-sizing: border-box;
        }

        .sky-pixel-cloud-tools button {
            width: 100%;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(80, 170, 255, 0.82), rgba(105, 120, 255, 0.82));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(90, 170, 255, 0.26);
        }

        .sky-pixel-cloud-tools button.is-active {
            background: linear-gradient(135deg, rgba(0, 218, 255, 0.88), rgba(60, 150, 255, 0.88));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 26px rgba(0, 210, 255, 0.42);
        }

        .sky-pixel-cloud-panel {
            margin-top: 10px;
            display: grid;
            gap: 8px;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
        }

        .sky-pixel-cloud-title {
            font-weight: 950;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-size: 11px;
            opacity: 0.9;
        }

        .sky-pixel-cloud-panel label {
            display: grid;
            gap: 6px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 8px;
        }

        .sky-pixel-cloud-panel input,
        .sky-pixel-cloud-panel select {
            width: 100%;
            box-sizing: border-box;
        }

        .sky-pixel-cloud-panel select {
            border: 0;
            border-radius: 9px;
            padding: 8px;
            color: #111827;
            font-weight: 900;
            background: rgba(255,255,255,0.95);
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-cloud-tools {
            display: none !important;
        }


        .sky-pixel-map-brightness-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
            margin: 10px 0 0;
            box-sizing: border-box;
        }

        .sky-pixel-map-brightness-tools button {
            width: 100%;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(38, 54, 74, 0.86), rgba(90, 110, 140, 0.82));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(20, 32, 45, 0.26);
        }

        .sky-pixel-map-brightness-tools button.is-active {
            background: linear-gradient(135deg, rgba(0, 218, 255, 0.78), rgba(50, 72, 115, 0.88));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 24px rgba(0, 210, 255, 0.34);
        }

        .sky-pixel-map-brightness-panel {
            margin-top: 10px;
            display: grid;
            gap: 8px;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
        }

        .sky-pixel-map-brightness-title {
            font-weight: 950;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-size: 11px;
            opacity: 0.9;
        }

        .sky-pixel-map-brightness-panel label {
            display: grid;
            gap: 6px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            padding: 8px;
        }

        .sky-pixel-map-brightness-value {
            color: #8eeaff;
            font-weight: 950;
        }

        .sky-pixel-map-brightness-reset {
            background: rgba(255,255,255,0.16) !important;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.13) !important;
        }

        .sky-pixel-night-mode-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
            margin: 10px 0 0;
            box-sizing: border-box;
        }

        .sky-pixel-night-mode-tools button {
            width: 100%;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(25, 32, 48, 0.88), rgba(55, 68, 96, 0.84));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(12, 18, 30, 0.28);
        }

        .sky-pixel-night-mode-tools button.is-active {
            background: linear-gradient(135deg, rgba(22, 32, 58, 0.95), rgba(90, 76, 155, 0.88));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 24px rgba(145, 125, 255, 0.34);
        }

        .sky-pixel-night-mode-panel {
            margin-top: 10px;
            display: grid;
            gap: 8px;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
        }

        .sky-pixel-night-mode-note {
            padding: 8px;
            border-radius: 10px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.10);
            color: rgba(255,255,255,0.82);
            line-height: 1.35;
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-night-mode-tools {
            display: none !important;
        }


        @media (max-width: 720px) {
            /* While a location card is open, remove every floating map widget
               from the touch layer. The panel becomes the only scroll target. */
            body.sky-pixel-location-panel-open .sky-pixel-search,
            body.sky-pixel-location-panel-open .sky-pixel-player-tools,
            body.sky-pixel-location-panel-open .sky-pixel-measure,
            body.sky-pixel-location-panel-open .sky-pixel-adventure-tools,
            body.sky-pixel-location-panel-open .sky-pixel-minimap,
            body.sky-pixel-location-panel-open .sky-pixel-map-tools-panel,
            body.sky-pixel-location-panel-open .sky-pixel-teleport-toggle {
                display: none !important;
                pointer-events: none !important;
            }

            body.sky-pixel-location-panel-open {
                overflow: hidden !important;
                touch-action: none !important;
            }

            body.sky-pixel-location-panel-open #map {
                touch-action: none !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanelBackdrop {
                position: fixed !important;
                inset: 0 !important;
                z-index: 90000 !important;
                pointer-events: auto !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanel.sky-pixel-panel {
                position: fixed !important;
                inset: 8px !important;
                width: auto !important;
                height: auto !important;
                max-width: none !important;
                max-height: calc(100dvh - 16px) !important;
                z-index: 90001 !important;
                transform: none !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                overscroll-behavior: contain !important;
                touch-action: pan-y !important;
                padding-bottom: 120px !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanel .sky-pixel-panel-content {
                overflow: visible !important;
                max-height: none !important;
                touch-action: pan-y !important;
                padding-bottom: 160px !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanelHero {
                min-height: 150px !important;
            }

            /* Mobile: stack all panel buttons so the third button (3D View)
               cannot get pushed off-screen or hidden by horizontal overflow. */
            body.sky-pixel-location-panel-open #skyPixelPanel .sky-pixel-panel-actions {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                width: 100% !important;
                overflow: visible !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanel .sky-pixel-panel-actions a,
            body.sky-pixel-location-panel-open #skyPixelBlueMapLink {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 100% !important;
                min-height: 44px !important;
                box-sizing: border-box !important;
                white-space: normal !important;
                text-align: center !important;
            }

            body.sky-pixel-location-panel-open #skyPixelBlueMapLink {
                order: 3 !important;
            }

            body.sky-pixel-location-panel-open #skyPixelPanelClose.sky-pixel-panel-close {
                position: fixed !important;
                top: 18px !important;
                right: 18px !important;
                z-index: 90002 !important;
                pointer-events: auto !important;
                touch-action: manipulation !important;
            }
        }


/* ===== sky-pixel-teleport-routes-style ===== */
.sky-pixel-map-tools-panel {
            position: fixed;
            left: 20px;
            top: 92px;
            z-index: 3600;
            width: 380px;
            max-height: calc(100dvh - 120px);
            overflow-y: auto;
            background: rgba(10, 14, 22, 0.88);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 18px;
            padding: 12px;
            box-shadow: 0 12px 28px rgba(0,0,0,0.35);
            backdrop-filter: blur(12px);
            color: #ffffff;
        }


        .sky-pixel-map-tools-panel,
        .sky-pixel-teleport-result,
        #skyPixelAdventurePanel,
        #skyPixelTravelResult,
        #skyPixelExpeditionList {
            scrollbar-width: thin;
            scrollbar-color: rgba(0, 218, 255, 0.58) rgba(255,255,255,0.06);
        }

        .sky-pixel-map-tools-panel::-webkit-scrollbar,
        .sky-pixel-teleport-result::-webkit-scrollbar,
        #skyPixelAdventurePanel::-webkit-scrollbar,
        #skyPixelTravelResult::-webkit-scrollbar,
        #skyPixelExpeditionList::-webkit-scrollbar {
            width: 10px;
        }

        .sky-pixel-map-tools-panel::-webkit-scrollbar-track,
        .sky-pixel-teleport-result::-webkit-scrollbar-track,
        #skyPixelAdventurePanel::-webkit-scrollbar-track,
        #skyPixelTravelResult::-webkit-scrollbar-track,
        #skyPixelExpeditionList::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.055);
            border-radius: 999px;
            margin: 12px 0;
        }

        .sky-pixel-map-tools-panel::-webkit-scrollbar-thumb,
        .sky-pixel-teleport-result::-webkit-scrollbar-thumb,
        #skyPixelAdventurePanel::-webkit-scrollbar-thumb,
        #skyPixelTravelResult::-webkit-scrollbar-thumb,
        #skyPixelExpeditionList::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(0, 218, 255, 0.72), rgba(120, 90, 255, 0.72));
            border: 2px solid rgba(10, 14, 22, 0.72);
            border-radius: 999px;
            box-shadow: 0 0 12px rgba(0, 210, 255, 0.28);
        }

        .sky-pixel-map-tools-panel::-webkit-scrollbar-thumb:hover,
        .sky-pixel-teleport-result::-webkit-scrollbar-thumb:hover,
        #skyPixelAdventurePanel::-webkit-scrollbar-thumb:hover,
        #skyPixelTravelResult::-webkit-scrollbar-thumb:hover,
        #skyPixelExpeditionList::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, rgba(0, 238, 255, 0.92), rgba(150, 110, 255, 0.92));
        }


        .sky-pixel-map-tools-title {
            font-weight: 950;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            font-size: 12px;
            opacity: 0.9;
            margin: 0 36px 10px 2px;
        }

        .sky-pixel-map-tools-minimize {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 30px;
            height: 30px;
            border: 0;
            border-radius: 10px;
            color: #ffffff;
            background: rgba(255,255,255,0.14);
            font-weight: 950;
            cursor: pointer;
        }

        .sky-pixel-map-tools-panel.is-collapsed {
            width: auto;
            max-height: none;
            overflow: hidden;
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-teleport-toggle,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-player-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-adventure-tools {
            display: none !important;
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-tools-title {
            margin: 2px 42px 2px 2px;
        }

        .sky-pixel-teleport-toggle {
            position: static;
            z-index: auto;
            background: transparent;
            border: 0;
            border-radius: 0;
            padding: 0;
            box-shadow: none;
            backdrop-filter: none;
            margin-bottom: 10px;
        }

        .sky-pixel-teleport-toggle button {
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 800;
            cursor: pointer;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(90, 120, 255, 0.82), rgba(185, 80, 255, 0.82));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 0 18px rgba(132, 105, 255, 0.38);
        }

        .sky-pixel-teleport-toggle button.is-active {
            background: linear-gradient(135deg, rgba(0, 218, 255, 0.88), rgba(100, 88, 255, 0.88));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 26px rgba(0, 210, 255, 0.55);
        }



        .sky-pixel-map-tools-panel .sky-pixel-player-tools,
        .sky-pixel-map-tools-panel .sky-pixel-adventure-tools {
            position: static !important;
            left: auto !important;
            right: auto !important;
            top: auto !important;
            bottom: auto !important;
            z-index: auto !important;
            width: auto !important;
            max-width: none !important;
            margin: 10px 0 0 !important;
            box-sizing: border-box !important;
        }

        .sky-pixel-map-tools-panel .sky-pixel-player-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
        }

        .sky-pixel-map-tools-panel .sky-pixel-adventure-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
        }

        .sky-pixel-map-tools-panel .sky-pixel-player-tools button,
        .sky-pixel-map-tools-panel .sky-pixel-player-tools select,
        .sky-pixel-map-tools-panel .sky-pixel-player-import,
        .sky-pixel-map-tools-panel .sky-pixel-adventure-tools button {
            max-width: 100%;
        }

        .sky-pixel-map-tools-panel .sky-pixel-tool-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .sky-pixel-teleport-planner {
            margin-top: 10px;
            width: 100%;
            color: #ffffff;
            font-size: 13px;
        }

        .sky-pixel-teleport-title {
            font-weight: 900;
            letter-spacing: 0.02em;
            margin: 8px 2px 8px;
            color: #ffffff;
        }

        .sky-pixel-teleport-title.small {
            margin-top: 12px;
            opacity: 0.95;
        }

        .sky-pixel-teleport-layer-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-bottom: 10px;
        }

        .sky-pixel-teleport-layer-grid label,
        .sky-pixel-teleport-field {
            display: block;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 7px;
            color: #ffffff;
            font-weight: 700;
        }

        .sky-pixel-teleport-field {
            margin-bottom: 8px;
        }

        .sky-pixel-teleport-field select,
        .sky-pixel-teleport-field input {
            display: block;
            width: 100%;
            margin-top: 5px;
            border: 0;
            border-radius: 8px;
            padding: 8px;
            background: rgba(255,255,255,0.95);
            color: #111827;
            font-weight: 700;
            box-sizing: border-box;
        }

        .sky-pixel-teleport-actions {
            display: grid;
            grid-template-columns: 1fr 0.75fr;
            gap: 8px;
            margin: 8px 0;
        }

        .sky-pixel-teleport-actions button {
            border: 0;
            border-radius: 10px;
            padding: 9px 10px;
            color: #ffffff;
            font-weight: 900;
            cursor: pointer;
            background: rgba(0, 190, 255, 0.72);
        }

        .sky-pixel-teleport-actions button:last-child {
            background: rgba(255,255,255,0.16);
        }

        .sky-pixel-teleport-result {
            max-height: 220px;
            overflow-y: auto;
            background: rgba(0,0,0,0.28);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 12px;
            padding: 10px;
            line-height: 1.35;
        }

        .sky-pixel-teleport-route-step {
            padding: 7px 8px;
            border-radius: 9px;
            background: rgba(255,255,255,0.07);
            margin: 6px 0;
        }

        .sky-pixel-teleport-route-arrow {
            text-align: center;
            opacity: 0.8;
            font-weight: 900;
        }

        .sky-pixel-teleport-route-summary {
            font-weight: 900;
            color: #8eeaff;
            margin-bottom: 8px;
        }

        .sky-pixel-teleport-warning {
            color: #ffd37a;
            font-weight: 800;
        }




        .sky-pixel-external-tower-popup {
            min-width: 145px;
            max-width: 220px;
            padding: 8px 10px;
            color: #ffffff;
            background: rgba(10, 14, 22, 0.92);
            border: 1px solid rgba(255,255,255,0.28);
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(255,255,255,0.26), 0 10px 24px rgba(0,0,0,0.36);
            backdrop-filter: blur(10px);
            font-size: 12px;
            font-weight: 900;
            line-height: 1.25;
            text-align: center;
            pointer-events: none;
        }

        .sky-pixel-external-tower-popup small {
            display: block;
            margin-top: 3px;
            color: rgba(255,255,255,0.72);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .sky-pixel-teleport-alt {
            border: 1px solid rgba(255,255,255,0.13);
            border-radius: 12px;
            padding: 8px;
            margin: 8px 0 10px;
            background: rgba(255,255,255,0.055);
        }
        .sky-pixel-teleport-alt-title { font-weight: 900; margin-bottom: 6px; color: #ffffff; }
        .sky-pixel-teleport-option-map,
        .sky-pixel-teleport-more-routes {
            width: 100%;
            border: 0;
            border-radius: 10px;
            padding: 9px 10px;
            color: #ffffff;
            font-weight: 900;
            cursor: pointer;
            background: rgba(0, 190, 255, 0.72);
            margin-top: 8px;
        }
        .sky-pixel-teleport-more-routes {
            background: linear-gradient(135deg, rgba(255, 160, 40, 0.78), rgba(255, 75, 75, 0.78));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14);
        }
        .sky-pixel-teleport-more-routes:disabled {
            cursor: default;
            opacity: 0.72;
            background: rgba(255,255,255,0.16);
        }
        .sky-pixel-teleport-leg-direct { color: #70d7ff; font-weight: 900; }
        .sky-pixel-teleport-leg-layover { color: #ffb347; font-weight: 900; }
        .sky-pixel-teleport-leg-third { color: #ff6b6b; font-weight: 900; }
        
        .sky-pixel-inline-add{
            display:flex;
            gap:8px;
            align-items:center;
        }
        .sky-pixel-inline-add input{
            flex:1;
            min-width:0;
        }
        .sky-pixel-inline-add button{
            flex:0 0 auto;
            white-space:nowrap;
        }

.sky-pixel-teleport-extra-stops { margin: 6px 0 8px; display: grid; gap: 6px; }
        .sky-pixel-teleport-extra-stop {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 10px;
            padding: 7px 8px;
            font-weight: 800;
        }
        .sky-pixel-teleport-extra-stop button,
        .sky-pixel-teleport-option-map {
            border: 0;
            border-radius: 9px;
            padding: 7px 9px;
            color: #ffffff;
            background: rgba(0, 190, 255, 0.72);
            font-weight: 900;
            cursor: pointer;
        }
        .sky-pixel-teleport-extra-stop button { background: rgba(255,255,255,0.16); }
        .sky-pixel-teleport-option-map { width: 100%; margin-top: 8px; }
        .sky-pixel-teleport-alt.is-selected {
            border-color: rgba(0, 225, 255, 0.55);
            box-shadow: 0 0 18px rgba(0, 210, 255, 0.22);
        }



        .sky-pixel-country-border-tools {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 14px;
            padding: 10px;
            margin: 10px 0 0;
            box-sizing: border-box;
        }

        .sky-pixel-country-border-tools button {
            width: 100%;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            font-weight: 900;
            cursor: pointer;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(255, 182, 72, 0.82), rgba(255, 92, 92, 0.82));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(255, 150, 70, 0.24);
        }

        .sky-pixel-country-border-tools button.is-active {
            background: linear-gradient(135deg, rgba(255, 215, 95, 0.92), rgba(255, 120, 72, 0.92));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 24px rgba(255, 185, 70, 0.42);
        }

        .sky-pixel-country-border-panel {
            margin-top: 10px;
            color: #ffffff;
            font-size: 13px;
            font-weight: 800;
            line-height: 1.35;
        }

        .sky-pixel-country-border-note {
            margin-top: 8px;
            padding: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
            color: rgba(255,255,255,0.88);
        }

        .sky-pixel-country-border-list {
            display: grid;
            gap: 8px;
            margin-top: 8px;
        }


        .sky-pixel-country-layer-controls {
            display: grid;
            gap: 7px;
            margin-top: 10px;
            padding: 8px;
            border-radius: 12px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.11);
        }

        .sky-pixel-country-layer-controls label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.09);
            cursor: pointer;
        }

        .sky-pixel-country-layer-controls input {
            width: 16px;
            height: 16px;
            flex: 0 0 auto;
        }

        .sky-pixel-country-layer-controls .sky-pixel-country-all {
            font-weight: 950;
            background: rgba(255,255,255,0.11);
        }

        .sky-pixel-country-border-card {
            padding: 8px;
            border-radius: 10px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .sky-pixel-country-border-card strong {
            display: block;
            margin-bottom: 4px;
        }

        .sky-pixel-country-popup {
            min-width: 210px;
            max-width: 270px;
            padding: 10px 12px;
            color: #ffffff;
            background: rgba(10, 14, 22, 0.92);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 14px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.36);
            backdrop-filter: blur(10px);
            font-size: 13px;
            line-height: 1.35;
        }

        .sky-pixel-country-popup-title {
            font-weight: 950;
            font-size: 14px;
            margin-bottom: 6px;
        }

        .sky-pixel-country-popup-row {
            display: grid;
            grid-template-columns: 86px 1fr;
            gap: 8px;
            margin-top: 4px;
        }

        .sky-pixel-country-popup-row span {
            color: rgba(255,255,255,0.68);
            font-weight: 800;
        }

        .sky-pixel-country-popup-row strong {
            color: #ffffff;
            font-weight: 900;
        }

        .sky-pixel-country-popup-hint {
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px solid rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.82);
            font-weight: 900;
        }

        .sky-pixel-political-legend {
            position: fixed;
            right: 18px;
            bottom: 18px;
            z-index: 3550;
            min-width: 190px;
            padding: 11px 12px;
            color: #ffffff;
            background: rgba(10, 14, 22, 0.88);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 16px;
            box-shadow: 0 10px 26px rgba(0,0,0,0.34);
            backdrop-filter: blur(10px);
            font-size: 13px;
            font-weight: 850;
        }

        .sky-pixel-political-legend-title {
            font-weight: 950;
            margin-bottom: 8px;
            letter-spacing: 0.03em;
        }

        .sky-pixel-political-legend-list {
            display: grid;
            gap: 6px;
        }

        .sky-pixel-political-legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sky-pixel-political-legend-swatch {
            width: 14px;
            height: 14px;
            border-radius: 5px;
            box-shadow: 0 0 10px currentColor;
            flex: 0 0 auto;
        }

        @media (max-width: 720px) {
            .sky-pixel-political-legend {
                right: 10px;
                bottom: 84px;
                max-width: calc(100vw - 20px);
                font-size: 12px;
            }
        }


        .sky-pixel-country-info-backdrop {
            position: fixed;
            inset: 0;
            z-index: 88000;
            background: rgba(0,0,0,0.48);
            opacity: 0;
            pointer-events: none;
            transition: opacity 180ms ease;
        }

        .sky-pixel-country-info-backdrop.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .sky-pixel-country-info-panel {
            position: fixed;
            right: 22px;
            top: 22px;
            bottom: 22px;
            z-index: 88001;
            width: min(520px, calc(100vw - 44px));
            overflow: hidden;
            color: #ffffff;
            background: rgba(10, 14, 22, 0.94);
            border: 1px solid rgba(255,255,255,0.18);
            border-radius: 24px;
            box-shadow: 0 24px 70px rgba(0,0,0,0.52);
            backdrop-filter: blur(14px);
            transform: translateX(calc(100% + 36px));
            transition: transform 220ms ease;
        }

        .sky-pixel-country-info-panel.is-open {
            transform: translateX(0);
        }

        .sky-pixel-country-info-close {
            position: absolute;
            top: 14px;
            right: 14px;
            z-index: 2;
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 14px;
            color: #ffffff;
            background: rgba(0,0,0,0.42);
            font-size: 24px;
            font-weight: 900;
            cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
        }

        .sky-pixel-country-info-hero {
            min-height: 190px;
            position: relative;
            display: flex;
            align-items: flex-end;
            padding: 22px;
            box-sizing: border-box;
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 20% 25%, rgba(255,255,255,0.22), transparent 28%),
                linear-gradient(135deg, rgba(58,142,190,0.85), rgba(24,56,89,0.92) 45%, rgba(16,96,62,0.86));
            background-size: cover;
            background-position: center;
        }

        .sky-pixel-country-info-hero.jesla {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 25% 20%, rgba(255,255,255,0.18), transparent 26%),
                linear-gradient(135deg, rgba(21,115,72,0.9), rgba(32,71,84,0.9) 48%, rgba(13,35,50,0.92));
        }

        .sky-pixel-country-info-hero.skyline {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 22% 22%, rgba(255,255,255,0.20), transparent 28%),
                linear-gradient(135deg, rgba(52,160,225,0.92), rgba(44,75,145,0.88) 48%, rgba(12,28,64,0.94));
        }

        .sky-pixel-country-info-hero.vawlla {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 24% 18%, rgba(255,255,255,0.20), transparent 28%),
                linear-gradient(135deg, rgba(230,135,35,0.92), rgba(138,82,34,0.88) 48%, rgba(62,42,22,0.94));
        }

        .sky-pixel-country-info-hero.kavarr {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 24% 18%, rgba(255,255,255,0.20), transparent 28%),
                linear-gradient(135deg, rgba(135,80,255,0.92), rgba(91,47,158,0.88) 48%, rgba(36,22,70,0.94));
        }

        .sky-pixel-country-info-hero.sapphire {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 24% 18%, rgba(255,255,255,0.22), transparent 28%),
                linear-gradient(135deg, rgba(255,118,190,0.92), rgba(185,66,138,0.88) 48%, rgba(72,24,58,0.94));
        }
        .sky-pixel-country-info-hero.hawkfall {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                radial-gradient(circle at 24% 18%, rgba(255,255,255,0.18), transparent 28%),
                linear-gradient(135deg, rgba(255,72,72,0.92), rgba(145,36,44,0.9) 48%, rgba(58,18,24,0.94));
        }

        .sky-pixel-country-info-hero.truce-territory {
            background-image:
                linear-gradient(180deg, rgba(10,14,22,0.04), rgba(10,14,22,0.92)),
                repeating-linear-gradient(135deg, rgba(80,190,255,0.34) 0 18px, rgba(92,235,142,0.28) 18px 36px),
                linear-gradient(135deg, rgba(28,62,82,0.95), rgba(34,68,54,0.95));
        }


        .sky-pixel-country-info-kicker {
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            font-weight: 950;
            color: rgba(255,255,255,0.82);
        }

        .sky-pixel-country-info-title {
            margin: 5px 48px 0 0;
            font-size: 30px;
            line-height: 1.05;
            font-weight: 950;
            text-shadow: 0 3px 15px rgba(0,0,0,0.45);
        }

        .sky-pixel-country-info-body {
            padding: 18px 20px 24px;
            overflow-y: auto;
            max-height: calc(100% - 190px);
            box-sizing: border-box;
        }

        .sky-pixel-country-info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 14px;
        }

        .sky-pixel-country-info-stat {
            border-radius: 14px;
            padding: 11px 12px;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.11);
        }

        .sky-pixel-country-info-stat span {
            display: block;
            color: rgba(255,255,255,0.66);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            font-weight: 950;
            margin-bottom: 4px;
        }

        .sky-pixel-country-info-stat strong {
            font-size: 15px;
            font-weight: 950;
        }

        .sky-pixel-country-info-description {
            margin: 0 0 14px;
            color: rgba(255,255,255,0.88);
            line-height: 1.48;
            font-size: 14px;
            font-weight: 650;
        }

        .sky-pixel-country-info-section-title {
            margin: 15px 0 8px;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: rgba(255,255,255,0.7);
            font-weight: 950;
        }

        .sky-pixel-country-info-list {
            display: grid;
            gap: 7px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .sky-pixel-country-info-list li {
            padding: 9px 10px;
            border-radius: 12px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.09);
            color: rgba(255,255,255,0.88);
            font-size: 13px;
            font-weight: 760;
        }


        .sky-pixel-country-info-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 16px 0 2px;
        }

        .sky-pixel-country-info-actions a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 42px;
            padding: 10px 14px;
            border-radius: 14px;
            color: #ffffff;
            text-decoration: none;
            font-weight: 950;
            background: linear-gradient(135deg, rgba(0, 190, 255, 0.78), rgba(105, 95, 255, 0.78));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(0, 190, 255, 0.22);
        }

        @media (max-width: 720px) {
            .sky-pixel-country-info-panel {
                inset: 8px;
                width: auto;
                border-radius: 20px;
            }
            .sky-pixel-country-info-grid {
                grid-template-columns: 1fr;
            }
            .sky-pixel-country-info-title {
                font-size: 25px;
            }
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-country-border-tools {
            display: none !important;
        }

        @media (max-width: 720px) {
            .sky-pixel-map-tools-panel {
                left: 10px;
                right: 10px;
                top: auto;
                bottom: 12px;
                width: auto;
                max-height: 55dvh;
            }

            .sky-pixel-teleport-toggle button,
            .sky-pixel-map-tools-panel button {
                min-height: 44px;
            }


            .sky-pixel-map-tools-panel.is-collapsed {
                left: 12px !important;
                right: auto !important;
                bottom: 126px !important;
                top: auto !important;
                width: auto !important;
                min-width: 190px !important;
                max-width: calc(100vw - 24px) !important;
                max-height: none !important;
                overflow: visible !important;
                padding: 12px 54px 12px 14px !important;
                display: block !important;
                z-index: 5200 !important;
                border-radius: 18px !important;
                pointer-events: auto !important;
            }

            .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-tools-title {
                display: block !important;
                margin: 0 !important;
                white-space: nowrap !important;
                line-height: 30px !important;
            }

            .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-tools-minimize {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                top: 8px !important;
                right: 8px !important;
                width: 38px !important;
                height: 38px !important;
                min-height: 38px !important;
                z-index: 5201 !important;
                pointer-events: auto !important;
            }


            body.sky-pixel-location-panel-open .sky-pixel-map-tools-panel {
                display: none !important;
                pointer-events: none !important;
            }
        }


/* ===== sky-pixel-real-weather-style ===== */
.sky-pixel-real-weather {
            margin: 12px 0 0;
            padding: 12px;
            border-radius: 16px;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.055));
            border: 1px solid rgba(255,255,255,0.13);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
        }

        .sky-pixel-real-weather[hidden] {
            display: none !important;
        }

        .sky-pixel-real-weather-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 8px;
        }

        .sky-pixel-real-weather-kicker {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.68);
            font-weight: 950;
        }

        .sky-pixel-real-weather-title {
            margin-top: 2px;
            font-size: 15px;
            line-height: 1.2;
            font-weight: 950;
        }

        .sky-pixel-real-weather-refresh {
            flex: 0 0 auto;
            border: 0;
            border-radius: 11px;
            color: #ffffff;
            background: rgba(255,255,255,0.14);
            font-weight: 950;
            cursor: pointer;
            padding: 8px 10px;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
        }

        .sky-pixel-real-weather-main {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .sky-pixel-real-weather-icon {
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 15px;
            background: rgba(0,0,0,0.22);
            font-size: 28px;
        }

        .sky-pixel-real-weather-temp {
            font-size: 24px;
            font-weight: 950;
            line-height: 1;
        }

        .sky-pixel-real-weather-condition {
            margin-top: 4px;
            color: rgba(255,255,255,0.86);
            font-size: 13px;
            font-weight: 800;
        }

        .sky-pixel-real-weather-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 10px;
        }

        .sky-pixel-real-weather-details div {
            border-radius: 11px;
            padding: 8px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.08);
        }

        .sky-pixel-real-weather-details span {
            display: block;
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            color: rgba(255,255,255,0.62);
            font-weight: 950;
            margin-bottom: 3px;
        }

        .sky-pixel-real-weather-details strong {
            font-size: 13px;
            font-weight: 950;
        }


        .sky-pixel-real-weather-reference-city {
            color: #70d7ff;
            font-weight: 950;
        }
        .sky-pixel-real-weather-note {
            margin-top: 8px;
            color: rgba(255,255,255,0.68);
            font-size: 12px;
            line-height: 1.35;
            font-weight: 750;
        }

        .sky-pixel-real-weather-source {
            margin-top: 3px;
            color: rgba(255,255,255,0.66);
            font-size: 12px;
            font-weight: 800;
        }


        .sky-pixel-local-time-panel {
            margin-bottom: 12px;
            padding: 12px;
            border-radius: 16px;
            color: #ffffff;
            background: linear-gradient(135deg, rgba(0, 218, 255, 0.14), rgba(255,255,255,0.065));
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 0 22px rgba(0, 210, 255, 0.12);
        }

        .sky-pixel-local-time-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .sky-pixel-local-time-kicker {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.68);
            font-weight: 950;
        }

        .sky-pixel-local-time-city {
            margin-top: 2px;
            font-size: 14px;
            line-height: 1.2;
            font-weight: 950;
        }

        .sky-pixel-local-time-clock {
            font-size: 24px;
            line-height: 1;
            font-weight: 950;
            white-space: nowrap;
            color: #ffffff;
            text-shadow: 0 0 18px rgba(0, 210, 255, 0.26);
        }

        .sky-pixel-local-time-sky {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255,255,255,0.10);
        }

        .sky-pixel-local-time-icon {
            width: 42px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: rgba(0,0,0,0.22);
            font-size: 25px;
        }

        .sky-pixel-local-time-status {
            font-weight: 950;
            color: #ffffff;
        }

        .sky-pixel-local-time-note {
            margin-top: 3px;
            color: rgba(255,255,255,0.70);
            font-size: 12px;
            line-height: 1.35;
            font-weight: 780;
        }

        .sky-pixel-real-weather-weekly-title {
            margin: 13px 0 8px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.68);
            font-weight: 950;
        }

        .sky-pixel-real-weather-weekly {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding: 2px 0 6px;
            scrollbar-width: thin;
            scrollbar-color: rgba(255,255,255,0.36) rgba(255,255,255,0.06);
        }

        .sky-pixel-real-weather-day {
            flex: 0 0 78px;
            min-height: 94px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: 4px;
            padding: 8px 7px;
            border-radius: 14px;
            background: rgba(255,255,255,0.085);
            border: 1px solid rgba(255,255,255,0.10);
            color: #ffffff;
            font: inherit;
            font-size: 12px;
            font-weight: 850;
            text-align: center;
            box-sizing: border-box;
            cursor: pointer;
            transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
        }

        .sky-pixel-real-weather-day:hover,
        .sky-pixel-real-weather-day:focus-visible {
            transform: translateY(-2px);
            background: rgba(255,255,255,0.14);
            border-color: rgba(255,255,255,0.22);
        }

        .sky-pixel-real-weather-day.is-selected {
            background: rgba(0, 218, 255, 0.18);
            border-color: rgba(0, 218, 255, 0.55);
            box-shadow: 0 0 18px rgba(0, 210, 255, 0.24), inset 0 0 0 1px rgba(255,255,255,0.10);
        }

        .sky-pixel-real-weather-day:active {
            transform: translateY(0);
        }

        .sky-pixel-real-weather-day-name {
            font-weight: 950;
            color: #ffffff;
        }

        .sky-pixel-real-weather-day-icon {
            font-size: 24px;
            line-height: 1;
            text-align: center;
        }

        .sky-pixel-real-weather-day-condition {
            display: none;
        }

        .sky-pixel-real-weather-day-rain {
            color: rgba(255,255,255,0.66);
            font-size: 10px;
            font-weight: 850;
            line-height: 1.1;
        }

        .sky-pixel-real-weather-day-temps {
            font-weight: 950;
            color: #ffffff;
            white-space: nowrap;
            font-size: 12px;
        }

        @media (max-width: 720px) {
            .sky-pixel-real-weather-details {
                grid-template-columns: 1fr;
            }

            .sky-pixel-real-weather-day {
                flex-basis: 72px;
            }
        }


/* ===== sky-pixel-road-recorder-style ===== */
.sky-pixel-road-recorder {
            position: fixed;
            right: 20px;
            top: 132px;
            z-index: 3520;
            width: 320px;
            color: #ffffff;
            background: rgba(10, 14, 22, 0.88);
            border: 1px solid rgba(255,255,255,0.16);
            border-radius: 16px;
            padding: 10px;
            box-shadow: 0 12px 28px rgba(0,0,0,0.34);
            backdrop-filter: blur(12px);
            font-size: 13px;
            box-sizing: border-box;
        }

        .sky-pixel-road-recorder-main {
            width: 100%;
            border: 0;
            border-radius: 14px;
            padding: 10px 14px;
            color: #ffffff;
            font-weight: 950;
            cursor: pointer;
            background: linear-gradient(135deg, rgba(20, 150, 255, 0.84), rgba(60, 100, 255, 0.84));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 0 18px rgba(20, 150, 255, 0.28);
        }

        .sky-pixel-road-recorder-main.is-active {
            background: linear-gradient(135deg, rgba(0, 218, 255, 0.90), rgba(46, 126, 255, 0.92));
            box-shadow: inset 0 0 0 1px rgba(255,255,255,0.30), 0 0 26px rgba(0, 210, 255, 0.48);
        }

        .sky-pixel-road-recorder-panel {
            margin-top: 10px;
            display: grid;
            gap: 8px;
        }

        .sky-pixel-road-recorder-panel label {
            display: grid;
            gap: 5px;
            font-weight: 850;
            color: rgba(255,255,255,0.9);
        }

        .sky-pixel-road-recorder-panel input {
            width: 100%;
            border: 0;
            border-radius: 9px;
            padding: 8px;
            box-sizing: border-box;
            color: #111827;
            background: rgba(255,255,255,0.96);
            font-weight: 850;
        }

        .sky-pixel-road-recorder-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
        }

        .sky-pixel-road-recorder-actions {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 7px;
        }

        .sky-pixel-road-recorder-actions button {
            border: 0;
            border-radius: 10px;
            padding: 8px 7px;
            color: #ffffff;
            font-weight: 950;
            cursor: pointer;
            background: rgba(255,255,255,0.16);
        }

        .sky-pixel-road-recorder-actions button:first-child {
            background: rgba(255, 165, 40, 0.78);
        }

        .sky-pixel-road-recorder-actions button:last-child {
            background: rgba(0, 190, 255, 0.72);
        }

        .sky-pixel-road-recorder-actions button:disabled {
            opacity: 0.45;
            cursor: default;
        }


        .sky-pixel-road-route-preview {
            padding: 8px;
            border-radius: 12px;
            background: rgba(0,0,0,0.18);
            border: 1px solid rgba(255,255,255,0.10);
            display: grid;
            gap: 7px;
        }

        .sky-pixel-road-route-preview-title {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255,255,255,0.68);
            font-weight: 950;
        }

        .sky-pixel-road-route-preview select {
            width: 100%;
            border: 0;
            border-radius: 9px;
            padding: 8px;
            color: #111827;
            background: rgba(255,255,255,0.96);
            font-weight: 900;
            box-sizing: border-box;
        }

        .sky-pixel-road-route-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
        }

        .sky-pixel-road-route-actions button {
            border: 0;
            border-radius: 10px;
            padding: 8px 7px;
            color: #ffffff;
            font-weight: 950;
            cursor: pointer;
            background: rgba(0, 190, 255, 0.72);
        }

        .sky-pixel-road-route-actions button:last-child {
            background: rgba(255,255,255,0.16);
        }

        .sky-pixel-road-recorder-readout {
            min-height: 38px;
            padding: 8px;
            border-radius: 10px;
            color: rgba(255,255,255,0.86);
            background: rgba(0,0,0,0.24);
            border: 1px solid rgba(255,255,255,0.10);
            line-height: 1.35;
            font-weight: 800;
        }

        @media (max-width: 720px) {
            body.sky-pixel-location-panel-open .sky-pixel-road-recorder {
                display: none !important;
                pointer-events: none !important;
            }

            .sky-pixel-road-recorder {
                left: 10px;
                right: 10px;
                top: auto;
                bottom: 74px;
                width: auto;
            }
        }
    
        .sky-pixel-road-finder label {
            display: grid;
            gap: 5px;
            font-weight: 850;
            color: rgba(255,255,255,0.9);
        }

        .sky-pixel-road-finder input {
            width: 100%;
            border: 0;
            border-radius: 9px;
            padding: 8px;
            box-sizing: border-box;
            color: #111827;
            background: rgba(255,255,255,0.96);
            font-weight: 850;
        }


/* ===== sky-pixel-final-tools-layout-fix ===== */
/* Full-collapse Sky Pixel tools: leaves only the + button visible. */
        .sky-pixel-map-tools-panel.is-collapsed {
            width: 46px !important;
            min-width: 46px !important;
            max-width: 46px !important;
            height: 46px !important;
            min-height: 46px !important;
            max-height: 46px !important;
            padding: 8px !important;
            overflow: hidden !important;
            border-radius: 14px !important;
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-tools-title,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-teleport-toggle,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-cloud-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-brightness-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-night-mode-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-country-border-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-player-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-adventure-tools,
        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-road-recorder {
            display: none !important;
        }

        .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-map-tools-minimize {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            top: 8px !important;
            right: 8px !important;
            width: 30px !important;
            height: 30px !important;
            min-height: 30px !important;
        }

        /* Road Recorder lives at the bottom of the Sky Pixel Tools panel. */
        .sky-pixel-map-tools-panel .sky-pixel-road-recorder {
            position: static !important;
            right: auto !important;
            left: auto !important;
            top: auto !important;
            bottom: auto !important;
            z-index: auto !important;
            width: auto !important;
            max-width: none !important;
            margin: 10px 0 0 !important;
            color: #ffffff;
            background: rgba(255,255,255,0.07) !important;
            border: 1px solid rgba(255,255,255,0.12) !important;
            border-radius: 14px !important;
            padding: 10px !important;
            box-shadow: none !important;
            backdrop-filter: none !important;
            font-size: 13px;
            box-sizing: border-box;
        }

        @media (max-width: 720px) {
            .sky-pixel-map-tools-panel.is-collapsed {
                left: 12px !important;
                right: auto !important;
                bottom: 126px !important;
                top: auto !important;
                width: 54px !important;
                min-width: 54px !important;
                max-width: 54px !important;
                height: 54px !important;
                min-height: 54px !important;
                max-height: 54px !important;
                padding: 8px !important;
                overflow: hidden !important;
            }
        }


/* ===== sky-pixel-maritime-routes-style ===== */
.sky-pixel-maritime-tools {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        padding: 10px;
        margin: 10px 0 0;
        box-sizing: border-box;
    }

    .sky-pixel-maritime-tools button {
        width: 100%;
        border: 0;
        border-radius: 14px;
        padding: 10px 14px;
        font-weight: 900;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(135deg, rgba(34,112,184,0.86), rgba(41,154,215,0.84));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    }

    .sky-pixel-maritime-tools button.is-active {
        background: linear-gradient(135deg, rgba(34,145,230,0.96), rgba(61,181,235,0.94));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
    }

    .sky-pixel-maritime-panel {
        margin-top: 9px;
        padding: 8px;
        border-radius: 11px;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.86);
        font-size: 12px;
        font-weight: 780;
        line-height: 1.4;
    }

    .sky-pixel-maritime-route-picker {
        display: grid;
        gap: 5px;
        margin: 0 0 9px;
        color: #ffffff;
        font-weight: 900;
    }

    .sky-pixel-maritime-route-picker select {
        width: 100%;
        box-sizing: border-box;
        border: 0;
        border-radius: 9px;
        padding: 8px;
        color: #111827;
        background: rgba(255,255,255,0.96);
        font-weight: 850;
    }

    .sky-pixel-maritime-popup {
        min-width: 220px;
        max-width: 290px;
        padding: 10px 12px;
        color: #ffffff;
        background: rgba(8,18,31,0.94);
        border: 1px solid rgba(105,190,255,0.55);
        border-radius: 13px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.38);
        backdrop-filter: blur(10px);
        font-size: 13px;
        line-height: 1.4;
        pointer-events: none;
    }

    .sky-pixel-maritime-popup strong {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
        font-weight: 950;
    }

    .sky-pixel-maritime-popup span {
        color: rgba(255,255,255,0.68);
        font-weight: 800;
    }

    .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-maritime-tools {
        display: none !important;
    }


/* ===== sky-pixel-coordinate-grid-style ===== */
.sky-pixel-coordinate-grid-tools {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 14px;
        padding: 10px;
        margin: 10px 0 0;
        box-sizing: border-box;
    }

    .sky-pixel-coordinate-grid-tools > button {
        width: 100%;
        border: 0;
        border-radius: 14px;
        padding: 10px 14px;
        font-weight: 900;
        cursor: pointer;
        color: #ffffff;
        background: linear-gradient(135deg, rgba(74,92,118,0.90), rgba(101,124,154,0.86));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    }

    .sky-pixel-coordinate-grid-tools > button.is-active {
        background: linear-gradient(135deg, rgba(80,132,180,0.96), rgba(106,160,206,0.94));
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.28);
    }

    .sky-pixel-coordinate-grid-panel {
        margin-top: 9px;
        padding: 8px;
        border-radius: 11px;
        background: rgba(0,0,0,0.18);
        border: 1px solid rgba(255,255,255,0.10);
        color: rgba(255,255,255,0.86);
        font-size: 12px;
        font-weight: 780;
        line-height: 1.4;
    }

    .sky-pixel-coordinate-grid-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px;
        margin-top: 8px;
    }

    .sky-pixel-coordinate-grid-options label {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 8px;
        border-radius: 9px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.09);
        cursor: pointer;
    }

    .sky-pixel-coordinate-grid-options input {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
    }

    .sky-pixel-coordinate-readout {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 3540;
        min-width: 154px;
        padding: 8px 10px;
        color: #ffffff;
        background: rgba(8,14,22,0.82);
        border: 1px solid rgba(255,255,255,0.16);
        border-radius: 11px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.28);
        backdrop-filter: blur(8px);
        font-size: 10px;
        line-height: 1.35;
        pointer-events: none;
    }

    .sky-pixel-coordinate-readout strong {
        display: block;
        margin-bottom: 3px;
        font-size: 10px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }

    .sky-pixel-coordinate-readout span {
        color: rgba(255,255,255,0.78);
    }

    .sky-pixel-map-tools-panel.is-collapsed .sky-pixel-coordinate-grid-tools {
        display: none !important;
    }

    @media (max-width: 720px) {
        .sky-pixel-coordinate-readout {
            right: 10px;
            bottom: 76px;
            min-width: 138px;
        }
    }



/* ===== Full-height Sky Pixel Tools drawer launched from the search bar ===== */
body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel {
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: min(460px, 100vw) !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: 18px 16px 24px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 85% 0%, rgba(46, 177, 255, .14), transparent 34%),
    radial-gradient(circle at 0% 35%, rgba(70, 106, 255, .09), transparent 30%),
    rgba(5, 10, 18, .97) !important;
  box-shadow: 24px 0 80px rgba(0,0,0,.46) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 2147482998 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  transform: translateX(-102%) !important;
  transition: transform .30s cubic-bezier(.2,.8,.2,1) !important;
}
body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel.is-tools-drawer-open {
  pointer-events: auto !important;
  transform: translateX(0) !important;
}
body.sky-pixel-tools-open {
  overflow: hidden;
}
body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel .sky-pixel-map-tools-title {
  min-height: 42px;
  display: flex;
  align-items: center;
  margin: 0 46px 14px 2px !important;
  font-size: 14px !important;
  letter-spacing: .10em !important;
}
body.sky-pixel-tools-drawer-ready #skyPixelMapToolsMinimize.sky-pixel-map-tools-minimize {
  position: sticky !important;
  float: right;
  top: 0 !important;
  right: 0 !important;
  z-index: 4 !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  color: #fff !important;
}
body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.is-tools-drawer-open.is-collapsed {
  width: min(460px, 100vw) !important;
  height: 100dvh !important;
}

@media (max-width: 720px) {
  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel {
    width: 100vw !important;
  }
}


/* ===== Expandable centered search mode ===== */
.sky-pixel-search {
  transition: width .26s ease, max-width .26s ease;
}

.sky-pixel-search-box {
  transition:
    width .26s ease,
    padding .26s ease,
    gap .22s ease,
    border-radius .26s ease,
    box-shadow .26s ease;
}

.sky-pixel-search-box #skyPixelSearchInput {
  transition:
    flex-basis .26s ease,
    width .26s ease,
    min-width .26s ease,
    padding .22s ease;
}

.sky-pixel-search-box .atlas-search-launcher,
.sky-pixel-search-box .sky-pixel-tools-launcher {
  transition:
    opacity .16s ease,
    transform .20s ease,
    width .22s ease,
    max-width .22s ease,
    padding .22s ease,
    margin .22s ease,
    border-width .16s ease;
}

/* Focused search becomes the only visible toolbar control. */
.sky-pixel-search.is-search-focused {
  width: min(760px, calc(100vw - 24px)) !important;
  max-width: min(760px, calc(100vw - 24px)) !important;
}

.sky-pixel-search.is-search-focused .sky-pixel-search-box {
  gap: 8px !important;
  box-shadow:
    0 16px 46px rgba(0,0,0,.50),
    0 0 0 1px rgba(77,190,255,.12),
    0 0 30px rgba(40,167,255,.18) !important;
}

.sky-pixel-search.is-search-focused #skyPixelSearchInput {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
}

.sky-pixel-search.is-search-focused .atlas-search-launcher,
.sky-pixel-search.is-search-focused .sky-pixel-tools-launcher {
  opacity: 0 !important;
  transform: scale(.82) translateX(8px) !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  border-width: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 720px) {
  .sky-pixel-search.is-search-focused {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
  }
}


/* ===== Mobile Sky Pixel Tools bottom sheet ===== */
@media (max-width: 720px) {
  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: min(84dvh, 760px) !important;
    max-height: calc(100dvh - 8px) !important;
    padding: 22px 12px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    border-right: 0 !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -24px 80px rgba(0,0,0,.58) !important;
    transform: translateY(104%) !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel::before {
    content: "";
    position: sticky;
    display: block;
    top: 0;
    width: 44px;
    height: 5px;
    margin: -12px auto 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.28);
    z-index: 12;
  }

  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel.sky-pixel-map-tools-panel.is-tools-drawer-open {
    transform: translateY(0) !important;
  }

  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsPanel .sky-pixel-map-tools-title {
    position: sticky;
    top: -22px;
    z-index: 8;
    min-height: 58px;
    margin: 0 -12px 12px !important;
    padding: 18px 58px 12px 16px;
    background: rgba(5,9,17,.94);
    border-bottom: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(18px);
  }

  body.sky-pixel-tools-drawer-ready #skyPixelMapToolsMinimize.sky-pixel-map-tools-minimize {
    position: sticky !important;
    top: 8px !important;
    right: 8px !important;
    float: right;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 10 !important;
  }

  #skyPixelMapToolsPanel button,
  #skyPixelMapToolsPanel select,
  #skyPixelMapToolsPanel input[type="text"],
  #skyPixelMapToolsPanel input[type="search"] {
    min-height: 44px;
    font-size: 16px;
  }

  #skyPixelMapToolsPanel .sky-pixel-teleport-layer-grid label,
  #skyPixelMapToolsPanel .sky-pixel-country-layer-controls label {
    min-height: 42px;
    display: flex;
    align-items: center;
  }

  body.sky-pixel-tools-open #map {
    pointer-events: none;
    touch-action: none;
  }
}