* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    background-color: black;
    color: white;
    font-family: 'VT323', monospace;
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -webkit-user-select: none;
    /* Safari */
    -ms-user-select: none;
    /* IE 10+ and Edge */
    user-select: none;
    /* Standard syntax */
}

body,
html {
    overflow: hidden;
}

#bmc-wbtn {
    width: 50px !important;
    height: 50px !important;
    background: rgb(255, 255, 255) !important;
    z-index: 1000 !important;
}

#bmc-wbtn img {
    display: none;
    /* Hide the original image */
}

#bmc-wbtn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
    background-image: url('https://chborel.ch/wp-content/uploads/2024/08/coffee_cup.svg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.title {
    font-size: 3rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: black;
}

@media (max-width: 768px) {
    .title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .title {
        font-size: 1.5rem;
    }
}

.space-invaders-font {
    font-family: 'VT323', monospace;
}

.small-font {
    font-size: 12px;
}

.popup-close-btn {
    position: absolute;
    top: 5px;
    right: 15px;
    color: white;
    /* White text to contrast with the black H2 header */
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    z-index: 1005;
    line-height: 1;
    font-family: sans-serif;
    /* Cleaner X look than VT323 */
    transition: color 0.2s;
}

.popup-close-btn:hover {
    color: #ccc;
    /* Light grey on hover */
}

.recent-badge {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
}


.marker-cluster div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding-right: 10px;
    padding-bottom: 10px;
}

.marker-cluster span {
    display: inline-block;
    text-align: center;
}

.marker-cluster-pie {
    background-color: transparent !important;
}

.marker-cluster-pie svg {
    display: block;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(45deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-45deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.wiggle-marker img {
    transform-origin: center;
    /* Ensures the rotation is centered */
    display: block;
    /* Fix for keeping the element inline */
    transition: transform 0.15s ease-out;
}

/* Invite a tap on pointer devices only — avoids sticky hover on touch */
@media (hover: hover) and (pointer: fine) {
    .wiggle-marker:hover img {
        transform: scale(1.08);
    }
}


.city-item {
    display: block;
    align-items: center;
    margin-bottom: 10px;
}

.city-name {
    margin-right: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 40%;
    padding-top: 2px;
    text-align: right;
    font-size: 1.2rem;
}

.city-sign {
    display: inline-block;
    transition: transform 0.3s;
}

.city-sign.rotated {
    transform: rotate(90deg);
}

.progress-bar-container {
    width: 90%;
    background-color: #f0f0f0;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    top: 2px;
    left: 20px;
}

.progress-bar {
    display: flex;
    width: 100%;
    height: 15px;
}

.progress-segment {
    height: 100%;
    color: white;
    text-align: right;
    padding-top: 1px;
    padding-right: 5px;
    font-size: .75em;
}

.progress-segment.green {
    background-color: green;
}

.progress-segment.pink {
    background-color: pink;
}

.progress-segment.mixed {
    background: repeating-linear-gradient(-45deg,
            green,
            green 5px,
            red 5px,
            red 10px);
}

.progress-segment.red {
    background-color: red;
}

.progress-segment.grey {
    background-color: grey;
}

.toggle-group {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.toggle-container {
    display: block;
    align-items: left;
    font-size: 1.2rem;
}

.toggle-container img {
    vertical-align: middle;
    height: 1em;
    margin-left: 5px;
}

.nested-toggle {
    margin-top: 5px;
}

.switch {
    margin-right: 10px;
}

#map-container {
    flex: 1;
    position: relative;
    width: 100vw;
}

#map {
    width: 100vw;
    height: 100vh;
}

#cities-list {
    list-style-type: none;
    padding: 0;
    overflow-y: auto;
    /* Enables vertical scrolling */
    max-height: 600px;
}

#cities-list li {
    text-align: left;
}

#nav-buttons {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
    z-index: 1000;
    align-items: center;
}

#nav-buttons span {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    color: black;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}

#prev-button,
#next-button {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-top: 5px !important;
}

#prev-button::before,
#next-button::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    /* Adjust the width as needed */
}

#prev-button::before {
    left: -20px;
    /* Adjust the left position as needed */
}

#next-button::before {
    right: -20px;
    /* Adjust the right position as needed */
}

#date-picker {
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    color: black;
    background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: 5px;
    border-radius: 5px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    min-width: 200px;
    backdrop-filter: blur(5px) !important;
}

/* Style the flatpickr calendar */
.flatpickr-calendar {
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /*
    position: absolute;
    left: 50% !important;
    transform: translate(-50%, -2%);
    */
}

.flatpickr-calendar .flatpickr-month {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 5px;
}

.flatpickr-calendar .flatpickr-day,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekday {
    font-size: 1rem;
}

.flatpickr-calendar .flatpickr-day {
    border-radius: 5px;
}

.flatpickr-calendar .flatpickr-day.selected {
    background-color: #007bff;
    color: white;
}

.flatpickr-calendar .flatpickr-day.disabled {
    color: #ccc;
    cursor: not-allowed;
}

.flatpickr-current-month input.cur-year {
    font-size: 0.8em;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-size: 0.8em;
}

/* Media query for mobile devices */
@media (max-width: 600px) {
    #date-picker {
        font-size: 1rem;
        /* Increase font size for better readability on mobile */
        padding: 5px;
        /* Increase padding for better touch target on mobile */
        min-width: 200px;
        /* Adjust minimum width for mobile */
    }
}


#time-text {
    font-family: 'VT323', monospace;
    font-size: 1.2rem !important;
    color: black;
    background-color: rgba(255, 255, 255, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    padding: 5px !important;
    border-radius: 5px !important;
    backdrop-filter: blur(5px) !important;
}

.icon-color-grey {
    filter: invert(48%) sepia(5%) saturate(0%) hue-rotate(220deg) brightness(87%) contrast(86%);
    image-rendering: pixelated;
}

.icon-color-purple {
    filter: invert(30%) sepia(90%) saturate(7489%) hue-rotate(277deg) brightness(92%) contrast(90%);
    image-rendering: pixelated;
}

.icon-color-green {
    filter: invert(53%) sepia(67%) saturate(631%) hue-rotate(67deg) brightness(91%) contrast(91%);
    image-rendering: pixelated;
}

.icon-color-red {
    filter: invert(22%) sepia(92%) saturate(4429%) hue-rotate(349deg) brightness(102%) contrast(101%);
    image-rendering: pixelated;
}

.icon-color-yellow {
    filter: brightness(0) saturate(100%) invert(62%) sepia(83%) saturate(759%) hue-rotate(10deg) brightness(94%) contrast(97%);
    image-rendering: pixelated;
}

#popup-dialogue-box {
    position: relative;
    /* Already set in JS, but good practice to ensure */
    /* Your existing styles like background, padding, border-radius etc. */
    background-color: white;
    color: black;
    padding: 15px 25px;
    border-radius: 10px;
    margin-bottom: 10px;
    /* This might need slight adjustment now */
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* The speech bubble tail */
#popup-dialogue-box::after {
    content: '';
    /* Necessary for pseudo-elements */
    position: absolute;
    bottom: -10px;
    /* Position it just below the bottom edge. Adjust size as needed. */
    left: 50%;
    /* Center horizontally */
    transform: translateX(-50%);
    /* Fine-tune centering */
    width: 0;
    height: 0;
    border-style: solid;
    /* Creates the triangle: */
    border-width: 10px 10px 0 10px;
    /* Top, Right, Bottom, Left */
    /* Make the top border match the bubble background, others transparent */
    border-color: white transparent transparent transparent;
}


.iss-icon {
    width: 24px;
    height: 24px;
    background-image: url('https://chborel.ch/wp-content/uploads/2024/08/iss.png');
    /* Replace with the actual path to your ISS icon image */
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    image-rendering: pixelated;
}

.blue-circle {
    width: 12px;
    height: 12px;
    background-color: rgba(0, 122, 255, 0.5);
    border-radius: 50%;
    position: relative;
}

.blue-circle::before {
    content: '';
    width: 12px;
    height: 12px;
    background-color: rgba(0, 122, 255, 1);
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

.instagram-icon {
    width: 16px;
    height: 16px;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    position: relative;
    left: 0px;
}

.leaflet-popup-close-button {
    display: none;
}

.leaflet-popup-content-wrapper {
    border-radius: 0%;
}

.leaflet-popup {}

.leaflet-popup-tip {}

.leaflet-popup-content {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    font-size: 1.1rem;
}

.leaflet-popup-content textarea {
    font-size: 1.rem;
}

div.hidden,
button.hidden {
    display: none !important;
}

#refresh-button {
    margin: 10px;
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
}

.invader-patchwork {
    display: flex;
    flex-wrap: wrap;
    overflow-y: scroll;
    max-height: 330px;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
}

.invader-container {
    position: relative;
    width: 100px;
    height: 100px;
}

.invader-image {
    width: 100%;
    height: 100%;
    display: block;
}

.invader-caption {
    position: absolute;
    bottom: 1px;
    right: 1px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-size: 8px;
    padding: 2px 8px;
    text-align: right;
}


/* Sidebar */
#side-buttons-container {
    position: fixed;
    right: 20px;
    bottom: 80px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Adjust the gap as needed */
    z-index: 1000;
}

#side-buttons-container button,
#side-buttons-container #draggable-button-container {
    background-color: white;
    background-size: 30px;
    background-repeat: no-repeat;
    background-position: center;
    color: black;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#recenter-button {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/08/gps.png');
}

#cities-info-button {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/07/city.png');
    image-rendering: pixelated;
    position: relative;
    overflow: visible;
}

#account-info-button {
    background-image: url("https://img.icons8.com/?size=48&id=82807&format=png");
    image-rendering: pixelated;
}

#friends-button {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23555' d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

#coffee-button {
    background-image: url('https://storage.ko-fi.com/cdn/logomarkLogo.png');
}

#kofiframe {
    display: none;
    border: none;
    padding: 4px;
    background: #f9f9f9;
    height: 80vh;
    position: fixed;
    right: 80px;
    bottom: 60px;
}

#achievements-button {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/08/achievements.svg');
    image-rendering: pixelated;
    background-size: 50% !important;
}

#draggable-button-container {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/07/location_icon.png');
}

#search-button {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/07/invader_magnifier.png');
}

#select-mode-button {
    position: fixed;
    top: 60px;
    left: 20px;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px dotted black;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: transparent;
    z-index: 1000;
}

#select-mode-button.solid {
    background-color: black;
    /* Solid color */
}

.draggable-pin-button {
    background-color: transparent !important;
    color: transparent;
    border: none;
    width: 50px;
    height: 50px;
    cursor: grab;
    touch-action: none;
}

.draggable-pin-button:active {
    cursor: grabbing;
}

.leaflet-touch .leaflet-control-geocoder {
    position: fixed;
    top: 50px;
    right: 20px;
    display: block;
}

@media (max-width: 600px) {
    #side-buttons-container {
        right: 10px;
        /* Move buttons closer to the edge */
        gap: 10px;
        /* Reduce the space between buttons */
    }

    #side-buttons-container button,
    #side-buttons-container #draggable-button-container {
        width: 40px;
        /* Smaller width */
        height: 40px;
        /* Smaller height */
        background-size: 24px;
        /* Smaller icon inside the button */
    }

    #shop-button {
        background-size: 35px !important;
    }
}




#map-title {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    width: 100%;
    background-color: black;
    color: white;
    text-align: center;
    padding: env(safe-area-inset-top) 0px 0px 0px;
    margin: 0;
    white-space: nowrap;
    font-size: 3em;
    font-family: 'VT323';
}

#public-comments-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

#public-comments-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden;
    color: black;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    position: relative;
}

#public-comments-title {
    margin-bottom: 14px;
    margin-right: 24px;
    font-size: 1.3rem;
    text-align: center;
}

#public-comments-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 12px;
    width: 100%;
    overflow-y: auto;
    flex: 1 1 0;
    min-height: 200px;
}

#public-comments-list li {
    background-color: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
}

#public-comments-list li button {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

#public-comments-list li button img {
    width: 16px;
    height: 16px;
}

#new-public-comment {
    width: 100%;
    height: 80px;
    margin-bottom: 8px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: none;
    font-size: 1rem;
    box-sizing: border-box;
}

#save-public-comment {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
    width: 100%;
    font-size: 1rem;
}

#save-public-comment:hover:not(:disabled) {
    opacity: 0.9;
}

#save-public-comment:disabled {
    background-color: #ccc;
    cursor: default;
}

#button-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 6px;
}

.comment-you-badge {
    display: inline-block;
    font-size: 0.7em;
    background: #e0e0e0;
    color: #555;
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    font-family: sans-serif;
}

#public-comments-list li .public-comment-action-button {
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #555;
    cursor: pointer;
    font-size: 0.78rem;
    line-height: 1;
    margin-left: 0;
    min-width: 52px;
    padding: 6px 8px;
}

#public-comments-list li .public-comment-action-button:hover {
    border-color: #999;
    color: #222;
}

#public-comments-content .popup-close-btn {
    position: absolute;
    top: 10px;
    right: 14px;
    font-size: 1.6rem;
    cursor: pointer;
    color: #888;
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}

#public-comments-content .popup-close-btn:hover {
    color: #333;
}

.comments-empty-state {
    text-align: center;
    color: #aaa;
    font-style: italic;
    padding: 20px 0;
    font-family: sans-serif;
    font-size: 0.95rem;
}

/* Slider */
#slider-container {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 60vh;
    /* Adjust the height as needed */
    padding: 10px;
    display: flex;
    align-items: center;
    z-index: 1000;
}

#time-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Optional: Make the background transparent */
}

.hidden {
    display: none;
}

.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: var(--toggle-color);
}

input:checked+.slider:before {
    transform: translateX(14px);
}

input[id="toggle-green"]:checked+.slider {
    --toggle-color: #4CAF50;
}

input[id="toggle-grey"]:checked+.slider {
    --toggle-color: #808080;
}

input[id="toggle-yellow"]:checked+.slider {
    --toggle-color: #e5c004;
}

input[id="toggle-red"]:checked+.slider {
    --toggle-color: #FF0000;
}

input[id="toggle-red-cities"]:checked+.slider {
    --toggle-color: #FF0000;
}

input[id="toggle-edges"]:checked+.slider {
    --toggle-color: #0000FF;
}

input[id="toggle-maps"]:checked+.slider {
    --toggle-color: #007AFF;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001 !important;
}

#account-info-popup,
#cities-info-popup,
#achievements-popup,
#shop-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001 !important;
    font-family: 'VT323';
}

#account-info-content,
#achievements-content,
#cities-info-content,
#shop-content {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    font-size: 1.1rem;
    max-height: 77vh;
    background: white;
    /* Changed from black */
    color: black;
    /* Changed from white */
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    max-width: 500px;
    width: 95%;
    box-sizing: border-box;
    font-family: "VT323";
}

#side-buttons-container #shop-button {
    background-image: url('https://chborel.ch/wp-content/uploads/2024/08/gift.svg');
    background-position: center 40%;
    background-size: 42px;
}

#account-info-popup h2,
#cities-info-popup h2,
#achievements-popup h2,
#shop-popup h2,
#friends-popup h2 {
    background: black;
    color: white;
    padding: 7px;
    /* Negative margins pull the header flush with the parent's edges */
    margin: -10px -10px 0px -10px;
    /* Round the top corners to match the parent popup box */
    border-radius: 10px 10px 0 0;
}

.shop-description {
    font-size: 0.7em;
    font-style: italic;
    color: #666;
    margin-top: 5px;
    margin-bottom: 20px;
    padding: 0 15px;
}


/* MODIFIED: Styles for the new shop layout with rows, price below title, and discounts */
#shop-items-container {
    display: flex;
    flex-direction: column;
    /* Stack items vertically */
    gap: 15px;
    /* Space between rows */
    padding: 10px;
}

.shop-item {
    display: flex;
    align-items: stretch;
    /* This makes children fill the height by default */
    background-color: #f2f2f2;
    border-radius: 8px;
    /* padding: 10px; <-- REMOVED */
    width: 100%;
    text-decoration: none;
    color: black;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    overflow: hidden;
    /* CRITICAL: This clips the child image's corners */
}

.shop-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1);
}

.shop-item::after {
    content: '';
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid #999;

    /* FIXES: */
    align-self: center;
    /* Vertically center the triangle */
    margin-left: 15px;
    /* Space between text and triangle */
    margin-right: 15px;
    /* Space between triangle and right edge */
    flex-shrink: 0;
}

/* This rule is the same, it holds the button(s) */
.shop-item-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* NEW: This is the container for the "Couleurs" button and its swatch pop-up.
   position: relative is CRITICAL for the pop-up positioning. */
.colors-button-container {
    position: relative;
    display: inline-block;
    /* Allows it to sit nicely in the flex container */
}

/* MODIFIED: This is now the pop-up for the swatches. */
.shop-item-colors {
    display: none;
    /* Hide it by default */
    position: absolute;
    bottom: 110%;
    /* Position it above the button */
    left: 50%;
    transform: translateX(-50%);
    background-color: white;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10;
    flex-wrap: wrap;
    /* Allows colors to wrap if there are many */
    gap: 6px;
    width: 120px;
    /* Give it a fixed width */
    justify-content: center;
    /* Center the swatches inside */
}

/* NEW: A little triangle pointing down from the pop-up */
.shop-item-colors::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

/* NEW: The magic rule to show the pop-up on hover OR click/tap (focus) */
.colors-button-container:hover .shop-item-colors,
.colors-button-container .colors-btn:focus+.shop-item-colors {
    display: flex;
    width: 150px;
}

/* The individual color swatch style is unchanged, but ensure it's there */
.color-swatch {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.shop-item-image {
    width: 90px;
    aspect-ratio: 1 / 1;
    /* This forces the element to be a square */
    object-fit: cover;
    /* This crops the image to fill the square without distortion */
    border-radius: 8px 0 0 8px;
    flex-shrink: 0;
}

.shop-item-text-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 15px;
    /* Adds back the necessary spacing internally */
}

.shop-item-name {
    font-size: .75em;
    font-family: 'VT323', sans-serif;
    margin-bottom: 5px;
    /* Space between name and price */
}

/* Container for price elements (original and discounted) */
.shop-item-price-container {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between original and discounted price */
    font-size: .7em;
}

.shop-item-price,
.shop-item-original-price {
    /* Base style for prices */
    font-weight: bold;
}

.shop-item-original-price {
    text-decoration: line-through;
    /* Strikethrough for original price */
    color: #aaa;
    /* Dimmer color for original price */
}

.shop-item-discounted-price {
    color: red;
    /* Green color for discounted price */
}

.view-3d-btn {
    border-radius: 10px;
    /* Adjust the value to control the roundness of the corners */
    background-color: #acacac;
    /* Dark grey background */
    border: none;
    /* No outline */
    color: white;
    /* White text */
    padding: 5px 10px;
    /* Adjust padding as needed */
    font-size: 12px;
    /* Adjust font size as needed */
    cursor: pointer;
    /* Change cursor to pointer on hover */
    margin-top: 5px;
}

#image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: none;
    /* Changed from flex for initial state */
    justify-content: center;
    align-items: center;
    z-index: 10002;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    pointer-events: none;
}

#image-lightbox-overlay.visible {
    display: flex;
    /* Re-enable flex when visible */
    opacity: 1;
    pointer-events: auto;
}

/* Styling for the <img> tag inside the lightbox */
#lightbox-image {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 5px;
    cursor: default;
}

/* Ensure the model container takes up space */
#model-container {
    display: flex;
    /* This will be changed from none by JS */
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.lightbox-close-button {
    position: absolute;
    top: 40px;
    right: 30px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 10003;
    background-color: black;
    border-radius: 50%;
    height: 45px;
    width: 45px;
    text-align: center;
}

#lightbox-purchase-btn {
    position: absolute;
    top: 90px;
    /* Position it below the 'X' close button */
    right: 30px;
    /* Align it with the 'X' close button */
    z-index: 10004;
    /* Make sure it's on top */

    display: none;
    /* Hidden by default, JS will show it */
    padding: 10px 20px;
    /* Slightly smaller padding to fit better */
    background-color: #4CAF50;
    color: white;
    font-family: 'VT323', monospace;
    font-size: 1em;
    /* Slightly smaller font size */
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

#lightbox-purchase-btn:hover {
    background-color: #45a049;
    /* Darker green on hover */
    transform: scale(1.05);
    /* Slight zoom effect */
}

/* Container for the 3D viewer canvas */
#model-viewer-container {
    width: 80vw;
    height: 70vh;
    max-width: 800px;
    max-height: 600px;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.5);

    /* --- Improved Pixelated Night Sky Background --- */

    /* 1. Base color for the deep space */
    background-color: #0c0a1a;

    /* 2. Layer multiple gradients to create a non-uniform starfield */
    background-image:
        /* Layer 4: A very subtle "pixel dust" texture to add depth and break the grid */
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),

        /* Layer 3: A dense field of very dim, tiny stars */
        radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 0),

        /* Layer 2: A sparse field of medium-brightness stars */
        radial-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 0),

        /* Layer 1: A very sparse field of the brightest stars */
        radial-gradient(white 1px, transparent 0);

    /* 3. Give each layer a different size to make the pattern appear random */
    background-size:
        10px 10px,
        /* Size for the pixel dust */
        10px 10px,
        /* Size for the pixel dust */
        40px 40px,
        /* Size for the dim stars */
        100px 100px,
        /* Size for the medium stars */
        150px 150px;
    /* Size for the bright stars */

    /* 4. Offset each layer differently to prevent alignment */
    background-position:
        0 0,
        /* Position for pixel dust */
        0 0,
        /* Position for pixel dust */
        20px 30px,
        /* Offset for dim stars */
        40px 60px,
        /* Offset for medium stars */
        75px 100px;
    /* Offset for bright stars */
}

/* Color selector container */
#color-selector {
    display: flex;
    justify-content: center;
    gap: 15px;
}

#colors-available-text {
    font-family: 'VT323', monospace;
    color: white;
    font-size: 1em;
    margin-top: 10px;
    /* Add some space above the text */
    margin-bottom: -10px;
    /* Reduce the default gap to the color buttons */
}

/* Individual color buttons */
.color-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid white;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.color-btn:hover {
    transform: scale(1.1);
}

.color-btn.active {
    border-color: #00aaff;
    /* Highlight for the active color */
    transform: scale(1.15);
}

.disabled-button {
    background-color: grey !important;
    pointer-events: none;
    opacity: 0.5;
}

.marker-cluster {
    background-color: grey;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: white;
    font-weight: bold;
}

.cluster-green {
    background-color: green;
}

.cluster-red {
    background-color: red;
}

.cluster-grey {
    background-color: grey;
}

.language-selector {
    position: absolute;
    top: 50px;
    right: 10px;
    z-index: 1000;
}

.language-selector span {
    cursor: pointer;
    margin-right: 10px;
    font-size: 24px;
    /* Adjust the size as needed */
}

.language-selector span.greyed-out {
    filter: grayscale(100%);
}

#image-container {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

#animated-image {
    width: 200px;
    height: auto;
    opacity: 0;
    position: relative;
    bottom: -100px;
    pointer-events: none;
    image-rendering: pixelated;
}

@keyframes slideIn {
    0% {
        bottom: -100px;
        opacity: .25;
    }

    100% {
        bottom: 50px;
        opacity: 1;
    }
}

@keyframes stay {

    0%,
    100% {
        bottom: 50px;
        opacity: 1;
    }
}

@keyframes slideOut {
    0% {
        bottom: 50px;
        opacity: 1;
    }

    100% {
        bottom: -100px;
        opacity: .25;
    }
}

.close-button {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
    z-index: 2010;
}

.ad {
    position: fixed;
    /* or use position: sticky; if you want it to scroll with the page */
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    /* Ensure the ad is above other content */
    background-color: #fff;
    /* Optional: Add a background color */
    padding: 10px;
    /* Optional: Add padding */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Optional: Add a shadow for better visibility */
    box-sizing: border-box;
    /* Include padding and border in the element's total width and height */
    max-width: 100%;
    /* Ensure the ad doesn't exceed the viewport width */
    overflow: hidden;
    /* Handle any overflow content */
}

@media (max-width: 768px) {
    .ad {
        top: auto;
        z-index: 2000;
        bottom: 0px;
        height: 50vh;
        width: 100vw;
        /* Ensure the ad takes the full width of the viewport on smaller screens */
    }
}


#background-sync-indicator {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 10px);
    right: 12px;
    z-index: 5001;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border: 1px solid rgba(0, 255, 204, 0.55);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.78);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 18px rgba(0, 255, 204, 0.25);
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#background-sync-indicator.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.sync-invader {
    width: 36px;
    height: 24px;
    color: #00ffcc;
    background: transparent;
    position: relative;
    image-rendering: pixelated;
}

.sync-invader::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 4px;
    background: currentColor;
    box-shadow:
        8px 0 currentColor,
        20px 0 currentColor,
        28px 0 currentColor,
        4px 4px currentColor,
        8px 4px currentColor,
        12px 4px currentColor,
        16px 4px currentColor,
        20px 4px currentColor,
        24px 4px currentColor,
        28px 4px currentColor,
        0 8px currentColor,
        4px 8px currentColor,
        12px 8px currentColor,
        16px 8px currentColor,
        20px 8px currentColor,
        28px 8px currentColor,
        32px 8px currentColor,
        0 12px currentColor,
        4px 12px currentColor,
        8px 12px currentColor,
        12px 12px currentColor,
        16px 12px currentColor,
        20px 12px currentColor,
        24px 12px currentColor,
        28px 12px currentColor,
        32px 12px currentColor,
        4px 16px currentColor,
        12px 16px currentColor,
        20px 16px currentColor,
        28px 16px currentColor,
        0 20px currentColor,
        8px 20px currentColor,
        24px 20px currentColor,
        32px 20px currentColor;
    animation: sync-invader-pulse 0.8s steps(2, end) infinite;
}

.sync-dots {
    display: flex;
    gap: 4px;
}

.sync-dots span {
    width: 4px;
    height: 4px;
    background: #ffffff;
    opacity: 0.35;
    animation: sync-dot 0.9s steps(2, end) infinite;
}

.sync-dots span:nth-child(2) { animation-delay: 0.15s; }
.sync-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes sync-invader-pulse {
    50% { color: #ffffff; filter: drop-shadow(0 0 6px #00ffcc); }
}

@keyframes sync-dot {
    50% { opacity: 1; transform: translateY(-2px); }
}


@media (prefers-reduced-motion: reduce) {
    .sync-invader::before,
    .sync-dots span {
        animation: none;
    }
}

@media (max-width: 600px) {
    #background-sync-indicator {
        top: calc(env(safe-area-inset-top) + 8px);
        right: 8px;
        padding: 6px 7px;
        transform-origin: top right;
    }
}

/* Progress bar styles */
#loading-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 4999;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.5s ease;
}

#loading-progress-container {
    width: 280px;
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

#loading-progress-bar {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff 0%, #c8c8dc 100%);
}

/* Dynamic styles for pin control buttons (moved from JS dynamic injection) */
.pin-control-buttons {
    position: absolute;
    display: flex;
    gap: 5px;
    z-index: 9999;
    pointer-events: auto;
    left: 30px;
    top: -10px;
}

.pin-control-buttons button {
    width: 24px;
    height: 24px;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    line-height: 1;
    font-family: system-ui;
}

.pin-control-buttons .done-btn {
    color: #4CAF50;
}

.pin-control-buttons .cancel-btn {
    color: #f44336;
}

/* ── Map Toggle Bar ─────────────────────────────────── */
#map-toggles {
    position: fixed;
    bottom: 80px;
    left: 0;
    z-index: 1000;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    transform: translateX(calc(-100% + 36px));
    transition: transform 0.25s ease;
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    color: #222;
}

#map-toggles.open {
    transform: translateX(0);
}

#map-toggles-body {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border-radius: 12px 0 0 12px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

#map-toggles-tab {
    width: 36px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    border: none;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: bold;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    min-height: 44px;
    padding: 0;
    flex-shrink: 0;
}

.map-toggle-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.map-toggle-row.nested {
    padding-left: 20px;
}

.map-toggle-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-green {
    background: #4CAF50;
}

.dot-grey {
    background: #9E9E9E;
}

.dot-yellow {
    background: #FFC107;
}

.dot-red {
    background: #F44336;
}

.dot-blue {
    background: #2196F3;
}

/* ── Spotlight Search ───────────────────────────────── */
#search-popup {
    position: fixed;
    inset: 0;
    z-index: 2001;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 20vh;
    background: transparent;
}

#search-panel {
    width: min(580px, 95vw);
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    font-family: 'VT323', monospace;
}

#search-input-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 10px;
}

#search-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.5);
    flex-shrink: 0;
}

#search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'VT323', monospace;
    font-size: 1.4rem;
    caret-color: #fff;
}

#search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

#search-kbd-esc {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 6px;
    font-family: monospace;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

#search-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0;
}

#search-results {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: calc(8 * 60px);
    overflow-y: auto;
}

#search-results:empty {
    display: none;
}

#search-results li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    margin: 2px 6px;
    height: 56px;
    box-sizing: border-box;
    transition: background 0.1s;
}

#search-results li:hover,
#search-results li.search-result-active {
    background: rgba(255, 255, 255, 0.08);
}

.search-result-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.12);
}

.search-result-thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.search-result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    min-width: 0;
}

.search-result-name {
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'VT323', monospace;
}

.search-result-city {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'VT323', monospace;
}

.search-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.search-result-points {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-family: 'VT323', monospace;
}

.search-result-marker {
    width: 22px;
    height: 22px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}

/* ── Friend badges on map markers ────────────────── */
.friend-badges {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 2px;
    pointer-events: none;
    width: max-content;
}

.friend-badge {
    width: 12px;
    height: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

/* ── Friends chevron toggle ───────────────────────── */
#friends-toggle-chevron {
    display: inline-block;
    font-size: 14px;
    margin-right: 4px;
    transition: transform 0.2s ease;
}

#friends-toggle-chevron.open {
    transform: rotate(90deg);
}

/* ── Friends visibility panel ─────────────────────── */
#friends-visibility-panel {
    max-height: 0;
    overflow: hidden;
    padding: 0 10px;
    margin-left: 16px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 0 0 6px 6px;
    border-left: 2px solid rgba(255, 255, 255, 0.12);
    transition: max-height 0.25s ease, padding 0.25s ease;
}

#friends-visibility-panel.open {
    max-height: 300px;
    padding: 4px 10px 6px 10px;
}

.friends-vis-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    font-size: 0.85em;
}

.friends-vis-name {
    display: flex;
    align-items: center;
    gap: 5px;
    color: inherit;
    flex: 1;
}


/* Heart thumb — global friends toggle row + per-friend panel rows */
#friends-toggle-row .slider:before,
#friends-visibility-panel .slider:before {
    background-color: transparent;
    border-radius: 0;
    content: '♥';
    color: white;
    font-size: 16px;
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checked state: standard translateX for 34×20px pill */
#friends-toggle-row input:checked+.slider:before,
#friends-visibility-panel input:checked+.slider:before {
    transform: translateX(14px);
}

/* Pink fill for all-friends toggle when on */
#friends-vis-all:checked+.slider {
    --toggle-color: #ff69b4;
}

/* Per-friend toggles use --toggle-color set inline via JS (from friendColorMap) */

/* ── Friends popup ────────────────────────────────── */
#friends-content {
    position: relative;
    background: white;
    color: black;
    border-radius: 10px;
    font-family: 'VT323', monospace;
    max-height: 80vh;
    overflow-y: auto;
    padding: 10px;
    min-width: 280px;
}

.friends-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 6px;
    font-size: 1em;
}

#friends-code-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 8px;
}

#friends-code-display {
    font-size: 1.8em;
    font-weight: bold;
    letter-spacing: 4px;
    font-family: monospace;
}

#friends-copy-link {
    background: none;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    color: #555;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
#friends-copy-link:hover { background: #f0f0f0; color: #222; }
#friends-copy-link.copied { background: #d4edda; color: #155724; border-color: #c3e6cb; }

#friends-qr {
    margin: 10px 0;
    display: flex;
    justify-content: center;
}

#friends-qr canvas,
#friends-qr img {
    width: 128px;
    height: 128px;
    border: 4px solid white;
    border-radius: 4px;
}

#friends-name-edit {
    display: flex;
    gap: 8px;
    margin: 4px 0;
}

#friends-name-input {
    flex: 1;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#friends-name-save {
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    background: #2c3e50;
    color: white;
    border: none;
}

#friends-add-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 8px 0;
}

#friends-add-input {
    padding: 8px;
    font-size: 1.2em;
    letter-spacing: 3px;
    text-transform: uppercase;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-family: monospace;
}

#friends-add-btn {
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: #2c3e50;
    color: white;
    border: none;
}

#friends-add-status {
    font-size: .9em;
    min-height: 1.2em;
}

#friends-pending-list,
#friends-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#friends-pending-list li,
#friends-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    gap: 8px;
}

.friends-accept-btn,
.friends-reject-btn,
.friends-remove-btn {
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85em;
    border: none;
}

.friends-accept-btn {
    background: #27ae60;
    color: white;
}

.friends-reject-btn {
    background: #e74c3c;
    color: white;
}

.friends-remove-btn {
    background: rgba(255, 255, 255, .1);
    color: rgba(55, 55, 55, .7);
    border: 1px solid rgba(255, 255, 255, .3) !important;
    padding: 2px 7px;
    font-size: 1em;
    line-height: 1;
}

.friend-flash-count {
    font-size: 0.75em;
    opacity: 0.6;
    background: rgba(255,255,255,.12);
    border-radius: 8px;
    padding: 1px 5px;
    flex-shrink: 0;
}

.friend-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-friends {
    background: linear-gradient(135deg, #ff69b4 50%, #3498db 50%);
}

/* ===================== */
/* Cosmetic Animations   */
/* ===================== */

/* --- Pixel burst (capture) --- */
@keyframes pixel-burst {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

.pixel-burst-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  pointer-events: none;
  z-index: 9999;
  animation: pixel-burst 0.6s ease-out forwards;
}

/* --- Floating score (+PTS) --- */
@keyframes score-float {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-70px); opacity: 0; }
}

.score-float {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-family: 'VT323', monospace;
  font-size: 2.6rem;
  color: #ffe000;
  -webkit-text-stroke: 1.5px #000;
  text-shadow: 0 0 12px #ff0, 0 3px 8px rgba(0,0,0,0.9);
  white-space: nowrap;
  animation: score-float 1.2s ease-out forwards;
}

.selection-point-label-icon {
  background: transparent;
  border: 0;
}

.selection-point-label {
  color: #ffe000;
  font-family: 'VT323', monospace;
  font-size: 1.7rem;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 0 10px #ff0, 0 2px 6px rgba(0,0,0,0.9);
  white-space: nowrap;
  -webkit-text-stroke: 1.2px #000;
}

/* --- 100pt marker pulse --- */
@keyframes marker-pulse-100 {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.22); }
}

[data-rarity="3"] img {
  animation: marker-pulse-100 1.5s ease-in-out infinite;
  transform-origin: center center;
}

/* --- Cluster explosion --- */
@keyframes cluster-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

.cluster-pop {
  animation: cluster-pop 0.3s ease-out;
}

/* --- Tap feedback --- */
@keyframes marker-tap-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}

/* --- Landing squash (new icon after a flash/destroy refresh) --- */
@keyframes marker-land {
  0%   { transform: scale(0.8, 1.2); }
  40%  { transform: scale(1.18, 0.85); }
  70%  { transform: scale(0.94, 1.05); }
  100% { transform: scale(1, 1); }
}

.marker-land {
  animation: marker-land 0.3s ease-out;
  transform-origin: center center;
}

/* Progress ring — overlays #cities-info-button */
.progress-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.progress-ring__circle {
  fill: none;
  stroke-width: 3;
  stroke-linecap: butt;
  transform-origin: 50% 50%;
  transition: stroke-dasharray 0.4s ease, transform 0.4s ease;
}

.heading-cone-icon {
    background: none !important;
    border: none !important;
}

.heading-cone-svg {
    transform-origin: center center;
    transition: transform 0.15s ease-out;
}