:host {
    --node-shape: circle(50%);

    position: relative;
    display: block;
    overflow: visible;
    container-type: size;
    touch-action: none;
    pointer-events: none;
    cursor: grab;
}

:host(:focus) {
    outline: none;
}

:host(:active) {
    cursor: grabbing;
}

:host(doskvol-crew) {
    --node-shape: shape(
        from 50% 2%,
        curve to 87.53% 20.07% with 54.75% 2% / 84.56% 16.36%,
        curve to 96.8% 60.68% with 90.49% 23.79% / 97.85% 56.05%,
        curve to 70.83% 93.25% with 95.74% 65.32% / 75.11% 91.18%,
        curve to 29.17% 93.25% with 66.54% 95.31% / 33.46% 95.31%,
        curve to 3.2% 60.68% with 24.89% 91.18% / 4.26% 65.32%,
        curve to 12.47% 20.07% with 2.15% 56.05% / 9.51% 23.79%,
        curve to 50% 2% with 15.44% 16.36% / 45.25% 2%,
        close
    );
}

[part="shape"] {
    anchor-name: --node-shape;

    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border-radius: 50%;
    pointer-events: auto;
}

:host(doskvol-crew) [part="shape"] {
    border-radius: 0;
    border-shape: var(--node-shape);
}

:host(doskvol-district) [part="shape"] {
    border-radius: 1px;
}

[part="tier"],
[part="tier"]::marker {
    display: none;
    line-height: 1;
    pointer-events: none;
    text-box: trim-both cap alphabetic;
}

@supports (counter-set: list-item attr(data-tier type(<integer>), 0)) {
    [part="tier"] {
        display: list-item;
        list-style-position: inside;
        counter-set: list-item attr(data-tier type(<integer>), 0);
    }
}

:host(doskvol-district) [part="tier"] {
    display: none;
}

[part="label"] {
    position: absolute;
    z-index: 1;
    top: calc(100% + 4px);
    left: 50%;
    translate: -50% 0;
    width: max-content;
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}

.ddd-dots {
    pointer-events: none;
}

.ddd-allies,
.ddd-enemies {
    display: contents;
}

doskvol-ddd-dot {
    --ddd-dot-angle: 0deg;

    position: absolute;
    z-index: 2;
    position-anchor: --node-shape;
    top: anchor(--node-shape center);
    left: anchor(--node-shape center);
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    translate: -50% -50%;
    transform:
        rotate(var(--ddd-dot-angle))
        translateY(calc(-50cqi - var(--ddd-dot-distance, 6px)))
        rotate(calc(-1 * var(--ddd-dot-angle)));
    visibility: hidden;
}

doskvol-ddd-dot:state(ally) {
    --ddd-dot-angle: calc(-1 * sibling-index() * var(--ddd-dot-angle-step, 30deg));
}

doskvol-ddd-dot:state(enemy) {
    --ddd-dot-angle: calc(sibling-index() * var(--ddd-dot-angle-step, 30deg));
}

@supports not (border-shape: shape(from 50% 0%, line to 100% 100%, line to 0% 100%, close)) {
    :host(doskvol-crew) [part="shape"] {
        clip-path: var(--node-shape);
    }
}