/** Rings — disposition en pentagone **/

.rings {
    position: relative;
    min-height: 260px;
    color: $white-light;
    list-style: none;
    padding: 0;
    margin: 0;

    // — Common rules for all ring items —
    #earth,
    #air,
    #water,
    #fire,
    #void {
        position: absolute;

        label {
            position: relative;
            display: block;
            text-align: center;
            cursor: pointer;
            width: 5.5rem;
            line-height: normal;

            &.stance-active strong {
                text-decoration: underline 2px;
            }
        }

        i.i_earth,
        i.i_water,
        i.i_fire,
        i.i_air,
        i.i_void {
            font-size: 5rem;
            line-height: 4.75rem;
            display: block;
        }

        strong {
            display: block;
            font-size: 0.78rem;
            line-height: 1.3;
            margin-top: 0.15rem;
        }

        input {
            position: absolute;
            height: 1.9rem;
            width: 1.9rem;
            border-radius: 100%;
            top: 0;
            left: 0;
            text-align: center;
            font-size: 0.95rem;
            border: 2px solid $l5r5e-title;
            color: $white-light;
            &:hover {
                border: 2px solid $red-light;
                text-shadow: 0 0 3px $red;
                box-shadow: 0 0 3px inset $red;
            }
        }
    }

    // — Solaire / Lunaire badges —
    .ring-type {
        display: block;
        text-align: center;
        font-size: 0.62rem;
        line-height: 1.2 !important;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.07em;
        white-space: nowrap;
        margin-top: 0.1rem;
        pointer-events: none;

        &.solaire {
            color: #f5c842;
            text-shadow: 0 0 4px rgba(245, 180, 0, 0.6);
        }
        &.lunaire {
            color: #9ecfef;
            text-shadow: 0 0 4px rgba(100, 180, 230, 0.6);
        }
    }

    // — Pentagone centré — rayon 4.5rem autour du centre x=50%, y≈6.875rem
    // (centre de l'icône à 2.375rem du haut de chaque li)
    // cos/sin calculés pour les 5 sommets d'un pentagone régulier (Vide au sommet)

    // Pentagone ancré à gauche — centre du cercle à 8rem du bord gauche
    // Vide — sommet (−90°)
    #void {
        top: 0;
        left: 5.25rem;
        color: $l5r5e-void;
        input { background: $l5r5e-void; }
    }

    // Air (Solaire) — haut gauche (−162° : cos=−0.951, sin=−0.309)
    #air {
        top: 3.1rem;
        left: 1rem;
        color: $l5r5e-air;
        input { background: $l5r5e-air; }
    }

    // Eau (Lunaire) — haut droite (−18° : cos=0.951, sin=−0.309)
    #water {
        top: 3.1rem;
        left: 9.5rem;
        color: $l5r5e-water;
        input { background: $l5r5e-water; }
    }

    // Feu (Solaire) — bas gauche (126° : cos=−0.588, sin=0.809)
    #fire {
        top: 8.1rem;
        left: 2.6rem;
        color: $l5r5e-fire;
        input { background: $l5r5e-fire; }
    }

    // Terre (Lunaire) — bas droite (54° : cos=0.588, sin=0.809)
    #earth {
        top: 8.1rem;
        left: 7.9rem;
        color: $l5r5e-earth;
        input { background: $l5r5e-earth; }
    }
}