/** Rings — disposition en grille 2×2 + Vide centré en bas **/

.rings {
    display: grid;
    grid-template-areas:
        "air   water"
        "fire  earth"
        "void  void";
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    min-height: 0;
    padding: 0.25rem;
    list-style: none;
    color: $white-light;

    #air   { grid-area: air; }
    #water { grid-area: water; }
    #fire  { grid-area: fire; }
    #earth { grid-area: earth; }
    #void  { grid-area: void; justify-self: center; }

    // — Common ring cell —
    #earth,
    #air,
    #water,
    #fire,
    #void {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;

        label {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            width: 5.5rem;
            text-align: center;

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

        .ring-circle {
            position: relative;
            width: 4.5rem;
            height: 4.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

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

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

        input {
            position: absolute;
            height: 2rem;
            width: 2rem;
            border-radius: 100%;
            bottom: -0.5rem;
            right: -0.5rem;
            text-align: center;
            font-size: 1rem;
            font-weight: bold;
            border: 2px solid $l5r5e-title;
            color: $white-light;
            background: rgba($l5r5e-black, 0.75);

            &: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);
        }
    }

    // — Ring colors —
    #void  { color: $l5r5e-void;  input { background: rgba($l5r5e-void, 0.7); } }
    #air   { color: $l5r5e-air;   input { background: rgba($l5r5e-air, 0.7); } }
    #water { color: $l5r5e-water; input { background: rgba($l5r5e-water, 0.7); } }
    #fire  { color: $l5r5e-fire;  input { background: rgba($l5r5e-fire, 0.7); } }
    #earth { color: $l5r5e-earth; input { background: rgba($l5r5e-earth, 0.7); } }
}