.clans-section {
    width: 100%;
    min-height: 100vh;
    padding: 120px 40px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
    color: #fff;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.clans-leader-display {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 750px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.clans-leader-display > * {
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.clans-leader-display:hover > * {
    opacity: 0.5;
    filter: saturate(0.5);
}

.clans-leader-display:hover > *:hover {
    opacity: 1;
    filter: saturate(1);
}

.leader-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    opacity: 0;
    animation: fadeInScale 0.5s ease-out 0.2s forwards;
    will-change: transform, opacity;
}

.clan-hexagon {
    position: relative;
    --b: 3px;
    --h: 180px;
    height: var(--h);
    aspect-ratio: cos(30deg);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    will-change: transform, filter, opacity;
    background-color: rgb(255 255 255 / 11%);
    clip-path: polygon(50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%);
}

.clan-hexagon::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path:
      polygon(
        50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0,
        50% var(--b),
        calc(100% - var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),
        calc(100% - var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),
        50% calc(100% - var(--b)),
        calc(var(--b)*sin(60deg)) calc(75% - var(--b)*cos(60deg)),
        calc(var(--b)*sin(60deg)) calc(25% + var(--b)*cos(60deg)),
        50% var(--b)
      );
    background: #f5be6e;
    z-index: 2;
    transition: filter 0.3s ease;
}

.clan-hexagon::after {
    content: attr(data-lema);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: none; /* evita quebra por largura máxima */
    font-size: 1.1em;
    font-weight: 500;
    color: #f5be6e;
    text-align: center;
    white-space: nowrap; /* não quebrar linha */
}

/* Principais: não recortar o container, para o lema aparecer fora do hex */
.clan-hexagon.clan-hexagon-leader,
#orbit-d3s,
#orbit-srev,
#orbit-4sv,
#orbit-r4w {
    clip-path: none;
    background-color: transparent;
}

.clan-tag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2.2em;
    font-weight: 800;
    color: #fff;
    z-index: 3;
    text-align: center;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

.clan-tag::before {
    content: '';
    position: absolute;
    inset: 8px;
    z-index: 2; /* acima do preenchimento interno */
    --b2: 2px;
    clip-path: polygon(
      50% 0, -50% 50%, 50% 100%, 150% 50%, 50% 0,
      50% var(--b2),
      calc(100% - var(--b2)*sin(60deg)) calc(25% + var(--b2)*cos(60deg)),
      calc(100% - var(--b2)*sin(60deg)) calc(75% - var(--b2)*cos(60deg)),
      50% calc(100% - var(--b2)),
      calc(var(--b2)*sin(60deg)) calc(75% - var(--b2)*cos(60deg)),
      calc(var(--b2)*sin(60deg)) calc(25% + var(--b2)*cos(60deg)),
      50% var(--b2)
    );
    background: #f5be6e;
}

.clan-hexagon-leader {
    --h: 220px;
}

.clan-hexagon-leader .clan-tag,
.clan-orbiting .clan-tag {
    background-image: url('../../images/utils/apollo-royal-clans.svg');
}

.clan-hexagon-leader .clan-tag {
    background-image: url('../../images/utils/apollo-ryl-gold.svg');
}

.clan-hexagon-leader .clan-tag::after,
.clan-orbiting .clan-tag::after {
    content: '';
    position: absolute;
    inset: 10px; /* ligeiramente menor que o anel interno */
    z-index: 1; /* abaixo do anel interno, acima do fundo do container */
    clip-path: polygon(50% 0, 0 25%, 0 75%, 50% 100%, 100% 75%, 100% 25%);
    background: rgb(255 255 255 / 11%);
}

.clan-hexagon-leader .clan-tag {
    position: relative;
    z-index: 3;
    font-size: 3.5em;
}

.clan-orbiting {
    position: absolute;
    z-index: 5;
    opacity: 0;
}

#orbit-d3s {
    top: 5%;
    left: 25%;
    animation: fadeInUp 0.5s ease-out 0.5s forwards, float 4s ease-in-out 1.2s infinite alternate;
}
#orbit-4sv {
    top: 60%;
    left: 15%;
    transform: translateY(-50%);
    animation: fadeInUp-middle 0.5s ease-out 0.7s forwards, float-middle 4s ease-in-out 1.4s infinite alternate;
}
#orbit-r4w {
    top: 60%;
    right: 15%;
    transform: translateY(-50%);
    animation: fadeInUp-middle 0.5s ease-out 0.7s forwards, float-middle 4s ease-in-out 1.6s infinite alternate;
}
#orbit-srev {
    top: 5%;
    right: 25%;
    animation: fadeInUp 0.5s ease-out 0.5s forwards, float 4s ease-in-out 1s infinite alternate;
}

.clans-category {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin-top: 60px;
}

.clans-category h2, .clans-category h2::after {
    font-size: 2.2em;
    font-weight: 700;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    color: #f5be6e;
    text-shadow: 0 0 10px rgba(240, 165, 0, 0.7);
}

.clans-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 80px 40px;
}

/* Non-principal hexagons (grid list) slightly smaller */
.clans-grid .clan-hexagon { --h: 150px; }
.clans-grid .clan-tag { font-size: 1.9em; }

@keyframes float {
    from { transform: translateY(-10px); }
    to { transform: translateY(0px); }
}
@keyframes float-middle {
    from { transform: translateY(-50%) translateY(-10px); }
    to { transform: translateY(-50%) translateY(0px); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp-middle {
    from { opacity: 0; transform: translateY(-50%) translateY(30px); }
    to { opacity: 1; transform: translateY(-50%); }
}

@media (max-width: 768px) {
    .clans-leader-display {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto auto auto;
        align-items: center;
        justify-items: center;
        gap: 10px 0;
        height: auto;
        max-width: 100%;
        transform: scale(0.9);
        margin-bottom: 0;
        animation: none;
    }

    .leader-container,
    .clan-orbiting {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
        animation: none;
        opacity: 1;
        grid-row: auto;
        grid-column: auto;
    }
    
    #orbit-d3s { grid-row: 1; grid-column: 1; }
    #orbit-srev { grid-row: 1; grid-column: 3; }
    .leader-container { grid-row: 2; grid-column: 2; }
    #orbit-4sv { grid-row: 3; grid-column: 1; }
    #orbit-r4w { grid-row: 3; grid-column: 3; }

    .clan-hexagon::after {
        font-size: 0.8em;
        white-space: normal;
        max-width: 100px;
    }

    .clans-grid { 
        gap: 60px 30px; 
    }
    .clans-grid .clan-hexagon { 
        --h: 120px; 
    }
    .clans-grid .clan-tag { 
        font-size: 1.5em; 
    }

    .clan-hexagon-leader,
    .clan-orbiting {
        --h: 130px;
    }

    .clan-hexagon-leader { 
        --h: 150px; 
    }

    .clan-tag {
        font-size: 1.5em;
    }

    .clan-hexagon-leader .clan-tag {
        font-size: 2.5em;
    }
}

@media (max-width: 480px) {
    .clans-leader-display {
        transform: scale(0.8);
        gap: 0;
    }
    .clans-grid { 
        gap: 50px 15px;
    }
    .clan-hexagon {
         --h: 100px; 
    }
    .clan-hexagon-leader, .clan-orbiting {
        --h: 110px;
    }
    .clan-hexagon-leader {
        --h: 130px;
    }
    .clan-tag {
        font-size: 1.2em;
    }
    .clan-hexagon-leader .clan-tag {
        font-size: 2em;
    }
}