@import "../Theme.scss";

PlayerHud {
    position: absolute;
    bottom: 32px;
    left: 32px;
    width: 380px;
    pointer-events: none; // Permet de cliquer à travers en combat

    .player-hud-frame {
        flex-direction: row;
        align-items: flex-end;
        gap: 12px;
        background: linear-gradient(135deg, rgba(15, 17, 23, 0.94) 0%, rgba(10, 11, 15, 0.85) 100%);
        border: 1px solid rgba(229, 169, 60, 0.35);
        border-radius: 6px;
        padding: 12px 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85);

        .hud-left-socket {
            .weapon-slot {
                width: 72px;
                height: 64px;
                border: 1px solid rgba(255, 255, 255, 0.12);
                border-radius: 4px;
                background-color: rgba(255, 255, 255, 0.04);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;

                .weapon-name {
                    font-size: 10px;
                    font-weight: 800;
                    color: $color-accent;
                    text-transform: uppercase;
                    text-align: center;
                }

                .stance-indicator {
                    font-size: 8px;
                    font-weight: 700;
                    color: #94a3b8;
                    text-transform: uppercase;
                }
            }
        }

        .hud-gauges {
            flex-grow: 1;
            flex-direction: column;
        }
    }
}