l5rx-chiaroscuro/system/styles/scss/rings.scss

/** Rings — disposition pentagonale (5 éléments autour d'un cercle) **/
// Centre (130, 130), rayon 75px, sens horaire depuis le haut (-90°)
// Air(-90°) Eau(-18°) Feu(54°) Terre(126°) Vide(198°)

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

    #air   { left:  86px; top:  59px; z-index: 2; } // haut-gauche (−36°)
    #water { left: 174px; top:  59px; z-index: 2; } // haut-droite ( 36°)
    #fire  { left:  59px; top: 153px; z-index: 1; } // gauche      (252°)
    #earth { left: 201px; top: 153px; z-index: 1; } // droite      (108°)
    #void  { left: 130px; top: 205px; z-index: 1; } // bas         (180°)

    // — Common ring cell —
    #earth,
    #air,
    #water,
    #fire,
    #void {
        position: absolute;
        transform: translate(-50%, -50%);
        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 : masqués sur les anneaux, affichés latéralement —
    .ring-type { display: none; }

    // Air et Eau : label texte flottant AU-DESSUS de l'icône, hors du flux
    // (position: absolute → ne décale pas le cercle, ne casse pas l'espacement)
    #air label strong, #water label strong {
        position: absolute;
        bottom: calc(100% + 0.3rem); // au-dessus du ring-circle
        left: 0; right: 0;
        text-align: center;
        visibility: visible;
    }

    // Label vertical "☀ SOLAIRE" sur le côté gauche (entre Air et Feu)
    &::before {
        content: "☀ SOLAIRE";
        position: absolute;
        left: 0;
        top: 80px;
        writing-mode: vertical-lr;
        transform: rotate(180deg); // lecture de bas en haut
        font-size: 0.7rem;
        font-weight: bold;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ffe066;
        background: rgba(0, 0, 0, 0.55);
        padding: 4px 2px;
        border-radius: 3px;
        text-shadow: 0 0 4px #000, 0 0 8px rgba(255, 180, 0, 0.9);
        pointer-events: none;
    }

    // Label vertical "☽ LUNAIRE" sur le côté droit (entre Eau et Terre)
    &::after {
        content: "☽ LUNAIRE";
        position: absolute;
        right: 0;
        top: 80px;
        writing-mode: vertical-lr;
        font-size: 0.7rem;
        font-weight: bold;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #b8e4ff;
        background: rgba(0, 0, 0, 0.55);
        padding: 4px 2px;
        border-radius: 3px;
        text-shadow: 0 0 4px #000, 0 0 8px rgba(80, 160, 255, 0.9);
        pointer-events: none;
    }

    // — 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); } }

    // — Input value orienté vers le centre du pentagone —
    // #air (haut-gauche)  → centre est bas-droite  → default (bottom/right) ✓
    // #water (haut-droite) → centre est bas-gauche  → bottom / left
    #water .ring-circle input { right: auto; left: -0.5rem; }
    // #fire (gauche)        → centre est haut-droite → top / right
    #fire  .ring-circle input { bottom: auto; top: -0.5rem; }
    // #earth (droite)       → centre est haut-gauche → top / left
    #earth .ring-circle input { bottom: auto; top: -0.5rem; right: auto; left: -0.5rem; }
    // #void (bas)           → centre est haut-centre → top / centré
    #void  .ring-circle input { bottom: auto; top: -0.5rem; right: auto; left: 50%; transform: translateX(-50%); }
}