/* Identical location and area label styling for master & player. */

.dragon-location-icon {
    --location-hit-size: 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px !important;
    height: 48px !important;

    background: transparent;
    border: none;

    /* Сам контейнер не является зоной клика.
       Кликабельная область задаётся отдельно ниже. */
    pointer-events: none;
}

.dragon-location-hover-group {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    transform: scale(1);
    transform-origin: center center;
    transition: transform 120ms ease-out;

    pointer-events: none;
}

.dragon-location-hit-area {
    position: absolute;
    left: 50%;
    top: 50%;

    width: var(--location-hit-size);
    height: var(--location-hit-size);

    transform: translate(-50%, -50%);

    pointer-events: auto;
    cursor: pointer;
}

.dragon-location-icon img {
    display: block;
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    transform-origin: center center;
    pointer-events: none;
}

/* Лёгкое увеличение всего существующего маркера.
   У портовых городов вместе с городским знаком увеличивается
   и якорь, потому что они находятся внутри одной группы. */
.dragon-location-hover-group:hover {
    transform: scale(1.16);
}

.dragon-location-tooltip,
.dragon-road-tooltip {
    font-size: 13px;
    line-height: 1.25;
}

.dragon-location-anchor {
    pointer-events: none;
    position: absolute;
    width: 40px !important;
    height: 40px !important;

    right: -8px;
    top: -8px;

    transform: none !important;
}

.dragon-location-anchor-city-state {
    right: -12px;
    top: -12px;
}


/* ==========================================================
   ДОРОГИ
   ========================================================== */

.dragon-ancient-road-dots {
    pointer-events: none;
}



.dragon-area-label-icon {
    width: max-content !important;
    height: auto !important;

    background: transparent;
    border: none;

    overflow: visible;
    white-space: nowrap;
    cursor: pointer;
}

.dragon-area-label-content {
    display: inline-block;
    width: max-content;
    height: auto;

    transform-origin: 50% 50%;
    white-space: nowrap;
}

.dragon-area-label-text {
    display: inline-block;

    color: var(--area-label-color, #514b44);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: var(--area-label-font-size, 14px);
    font-style: italic;
    font-weight: normal;
    line-height: 1;
    white-space: nowrap;
}

.dragon-area-label-external .dragon-area-label-content {
    transform: none !important;
    white-space: nowrap;
}

.dragon-area-label-svg {
    display: block;
    overflow: visible;
}

.dragon-area-label-svg-text {
    fill: var(--area-label-color, #514b44);
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0.01em;
}

.dragon-area-label-bay,
.dragon-area-label-lake {
    --area-label-color: #4d91aa;
}

.dragon-area-label-forest {
    --area-label-color: #315f39;
}

.dragon-area-label-swamp {
    --area-label-color: #5c6948;
}

.dragon-area-label-desert {
    --area-label-color: #9a7545;
}

.dragon-area-label-mountains {
    --area-label-color: #665e55;
}

.dragon-area-label-region {
    --area-label-color: #514b44;
}

.dragon-area-label-country {
    --area-label-color: #403a35;
}

.dragon-area-label-region .dragon-area-label-text,
.dragon-area-label-country .dragon-area-label-text {
    font-style: normal;
}

.dragon-area-label-country .dragon-area-label-text {
    font-weight: 600;
    letter-spacing: 0.04em;
}